Add vue-vite and vue-webpack examples testing WASM in other frameworks

examples/ts/nextjs-app/README.md

-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+# nextjs-app
+
+Created by command: `npx create-next-app@latest nextjs-app`
+
+[pages/index.tsx](pages/index.tsx) file was modified
+
+Changes made in order for React + Next.js app to work:
+
+```diff
+const nextConfig = {
+  reactStrictMode: true,
++  webpack: (config, { isServer }) => {
++    if (!isServer) // Prevents client bundles from including node specific packages required for WASM loading in wax
++      config.resolve.fallback = {
++        fs: false,
++        path: false,
++        module: false
++      };
++
++    return config;
++  }
+};
+
+export default nextConfig;
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+As you can see, we had to extend webpack configuration, ensuring `fs`, `path` and `module` dependencies are omitted from bundling as code importing them will be unreachable on the client-web-side

examples/ts/vue-vite/.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+test-results
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

examples/ts/vue-vite/.npmrc

+# https://gitlab.syncad.com/hive group specification, offering aggregated package view: https://gitlab.syncad.com/groups/hive/-/packages
+@hiveio:registry=https://gitlab.syncad.com/api/v4/groups/136/-/packages/npm/

examples/ts/vue-vite/.vscode/extensions.json

+{
+  "recommendations": ["Vue.volar"]
+}

examples/ts/vue-vite/README.md

+# vue-webpack
+
+Created by command: `pnpm create vue@latest .`
+
+[src/App.vue](src/App.vue) file was modified
+
+Changes made in order for Vue + Vite to work:
+
+```diff
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue()
+  ],
++  optimizeDeps: { // Affects only dev build
++    exclude: ['@hiveio/wax'],
++    include: [
++      '@hiveio/wax > class-validator',
++      '@hiveio/wax > class-transformer',
++      '@hiveio/wax > long',
++      '@hiveio/wax > events',
++      '@hiveio/wax > reflect-metadata'
++    ]
++  }
+})
+```
+
+As you can see, we excluded `@hiveio/wax` from the optimized dependencies list, keeping its sub-dependencies optimized. This results in WASM being downloaded from the proper directory during development build.
+
+During production WASM file is automatically copied to the build directory.

examples/ts/vue-vite/__tests__/index.spec.ts

+import { expect, test } from '@playwright/test';
+
+test.describe('Proper WASM Wax loading on playwright ', () => {
+  test.beforeEach(async ({ page }) => {
+    /// use >> marker for each texts printed in the browser context
+    page.on('console', msg => {
+      console.log('>>', msg.type(), msg.text());
+    });
+
+    await page.goto("http://localhost:5317", { waitUntil: "load" });
+  });
+
+  test('WASM should be properly loaded during development', async ({ page }) => {
+    // Wait for wax to be loaded
+    await page.waitForFunction(() => typeof (window as any).waxLoaded !== "undefined");
+
+    const result = await page.evaluate(async() => {
+      return (window as any).waxLoaded; // This value is set by this app in App.vue after successfull wax initialization
+    });
+
+    // Wax should be loaded
+    expect(result).toBe(true);
+  });
+});

examples/ts/vue-vite/index.html

+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

examples/ts/vue-vite/jsconfig.json

+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

examples/ts/vue-vite/package.json

+{
+  "name": "vue-vite",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "unset CI && playwright test --workers 1 --max-failures 1 --project=wax_vue_vite_testsuite"
+  },
+  "dependencies": {
+    "vue": "^3.5.13",
+    "@hiveio/wax": "file:../../../ts"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "playwright": "^1.49.1",
+    "vite": "^6.0.5"
+  }
+}

examples/ts/vue-vite/playwright.config.ts

+// This is a workaround for https://github.com/microsoft/playwright/issues/18282#issuecomment-1612266345
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  projects: [
+    {
+      name: "wax_vue_vite_testsuite",
+      testDir: "./__tests__"
+    }
+  ],
+  // Run your local dev server before starting the tests
+  webServer: {
+    command: 'pnpm dev --port 5317'
+  }
+});

examples/ts/vue-vite/src/App.vue

+<template>
+  <main>You are using wax version: "{{ version }}"</main>
+</template>
+
+<script setup>
+import { createWaxFoundation } from '@hiveio/wax';
+import { ref, onBeforeMount } from 'vue';
+
+const version = ref();
+
+onBeforeMount(async () => {
+  try {
+    const wax = await createWaxFoundation();
+
+    version.value = wax.getVersion();
+
+    window.waxLoaded = true;
+  } catch (error) {
+    console.error(error);
+
+    window.waxLoaded = false;
+  }
+});
+</script>
\ No newline at end of file

examples/ts/vue-vite/src/main.js

+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

examples/ts/vue-vite/vite.config.js

+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue()
+  ],
+  optimizeDeps: { // Affects only dev build
+    exclude: ['@hiveio/wax'],
+    include: [
+      '@hiveio/wax > class-validator',
+      '@hiveio/wax > class-transformer',
+      '@hiveio/wax > long',
+      '@hiveio/wax > events',
+      '@hiveio/wax > reflect-metadata'
+    ]
+  }
+})

examples/ts/vue-webpack/.gitignore

+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/ts/vue-webpack/.npmrc

+shamefully-hoist=true
+@hiveio:registry=https://gitlab.syncad.com/api/v4/groups/136/-/packages/npm/

examples/ts/vue-webpack/README.md

+# vue-webpack
+
+Created by command: `vue create vue-webpack` ([`@vue/cli` package](https://www.npmjs.com/package/@vue/cli))
+
+[src/App.vue](src/App.vue) file was modified
+
+Changes made in order for Vue + Webpack to work:
+
+```diff
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
++  configureWebpack: config => {
++    config.resolve.fallback = {
++      fs: false,
++      path: false,
++      module: false,
++      crypto: false
++    };
++  }
+})
+```
+
+As you can see, we had to extend webpack configuration, ensuring `fs`, `path`, `module` and `crypto` dependencies are omitted from bundling as code importing them will be unreachable on the client-web-side

examples/ts/vue-webpack/babel.config.js

+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

examples/ts/vue-webpack/jsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

examples/ts/vue-webpack/package.json

+{
+  "name": "vue-webpack",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13",
+    "@hiveio/wax": "file:../../../ts"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

examples/ts/vue-webpack/public/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>