create-crossbind 2.0.0-beta.50

package/templates/web-react-rspack/CHANGELOG.md

@@ -0,0 +1,35 @@
+# @crossbind/example-web-react-rspack
+
+## 2.0.0-beta.50
+
+### Patch Changes
+
+- Aligned on the 2.0.0-beta.50 baseline. No source change; the version exists so every package in
+  the workspace names the same release.
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @crossbind/plugin-webpack@1.0.2
+  - @crossbind/plugin-webpack-loader@1.0.2
+
+## 1.0.0
+
+### Major Changes
+
+- 🚀 first stable release
+
+### Patch Changes
+
+- Updated dependencies
+  - @crossbind/example-lib-prebuilt-matrix@1.0.0
+
+## 1.0.0-beta.11
+
+### Patch Changes
+
+- chore: add initial version of CHANGELOGS files
+- Updated dependencies
+  - @crossbind/example-lib-prebuilt-matrix@1.0.0-beta.32

package/templates/web-react-rspack/README.md

@@ -0,0 +1,38 @@
+# @crossbind/example-web-react-rspack
+**crossbind React Rspack sample**  
+
+<a href="https://www.npmjs.com/package/@crossbind/example-web-react-rspack">
+    <img alt="NPM version" src="https://img.shields.io/npm/v/@crossbind/example-web-react-rspack?style=for-the-badge" />
+</a>
+<a href="https://github.com/crossbind/crossbind/blob/main/LICENSE">
+    <img alt="License" src="https://img.shields.io/github/license/crossbind/crossbind?style=for-the-badge" />
+</a>
+<a href="https://crossbind.dev/docs/guide/integrate-into-existing-project/rspack">
+    <img alt="Docs - Rspack" src="https://img.shields.io/badge/Docs_-_Rspack-20B2AA?style=for-the-badge" />
+</a>
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [crossbind - Prerequisites](https://crossbind.dev/docs/guide/getting-started/prerequisites) instructions.
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm run dev
+```
+
+Build the app for production:
+
+```bash
+pnpm run build
+```

package/templates/web-react-rspack/crossbind.config.mjs

@@ -0,0 +1,13 @@
+import Matrix from '@crossbind/example-lib-prebuilt-matrix/crossbind.config.js';
+
+export default {
+    general: {
+        name: 'crossbind-example-web-react-rspack',
+    },
+    dependencies: [
+        Matrix,
+    ],
+    paths: {
+        config: import.meta.url,
+    },
+};

package/templates/web-react-rspack/e2e/crossbind.spec.cjs

@@ -0,0 +1,7 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('check string receiving from c++', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByText('Matrix multiplier with c++   =>   J₃ * (2*J₃) = 6*J₃')).toBeVisible()
+});

package/templates/web-react-rspack/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Rspack + React</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>

package/templates/web-react-rspack/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@crossbind/example-web-react-rspack",
+  "private": true,
+  "version": "0.0.0",
+  "description": "crossbind React Rspack sample",
+  "homepage": "https://github.com/crossbind/crossbind/tree/main/examples/web-react-rspack#readme",
+  "repository": "https://github.com/crossbind/crossbind.git",
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rspack serve",
+    "build": "cross-env NODE_ENV=production rspack build",
+    "preview": "serve dist",
+    "e2e:dev": "playwright test --config playwright.dev.config.cjs",
+    "e2e:prod": "playwright test --config playwright.prod.config.cjs"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "@crossbind/example-lib-prebuilt-matrix": "^2.0.0-beta.50"
+  },
+  "devDependencies": {
+    "@rspack/plugin-react-refresh": "^2.0.2",
+    "@rspack/cli": "^2.1.8",
+    "@rspack/core": "^2.1.8",
+    "@rspack/dev-server": "^2.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "cross-env": "^10.1.0",
+    "react-refresh": "^0.18.0",
+    "@playwright/test": "^1.62.1",
+    "serve": "^14.2.6",
+    "@crossbind/plugin-webpack": "^2.0.0-beta.50",
+    "@crossbind/plugin-webpack-loader": "^2.0.0-beta.50"
+  },
+  "keywords": [
+    "crossbind-sample",
+    "webassembly",
+    "bind",
+    "c++",
+    "react",
+    "rspack",
+    "webpack"
+  ]
+}

package/templates/web-react-rspack/playwright.dev.config.cjs

@@ -0,0 +1,48 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './e2e',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 50000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+
+  reporter: 'html',
+
+  use: {
+    baseURL: 'http://localhost:8080',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm run dev',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/templates/web-react-rspack/playwright.prod.config.cjs

@@ -0,0 +1,52 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+// CROSSBIND_E2E_PORT lets sequential/parallel e2e runs give each project a unique free
+// port (avoids teardown races on the shared default).
+const port = process.env.CROSSBIND_E2E_PORT || '3000';
+
+module.exports = defineConfig({
+  testDir: './e2e',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 50000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+
+  reporter: 'html',
+
+  use: {
+    baseURL: `http://localhost:${port}`,
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: `npx serve dist -l ${port}`,
+    url: `http://localhost:${port}`,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/templates/web-react-rspack/rspack.config.mjs

@@ -0,0 +1,78 @@
+// @ts-check
+import fs from 'node:fs';
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
+import CrossbindWebpackPlugin from '@crossbind/plugin-webpack';
+
+const isDev = process.env.NODE_ENV === 'development';
+
+const crossbindWebpackPlugin = new CrossbindWebpackPlugin();
+const crossbindLoaderOptions = crossbindWebpackPlugin.getLoaderOptions();
+const { state, getTargetParams, getFilteredBuildTargets } = crossbindLoaderOptions;
+
+const targetParams = getTargetParams({ platform: ['wasm'], arch: ['wasm32'], runtime: ['st'], runtimeEnv: ['browser'] }, true);
+let buildTargetRelease = getFilteredBuildTargets(targetParams, { buildType: 'release' })?.[0];
+let buildTargetDebug = getFilteredBuildTargets(targetParams, { buildType: 'debug' })?.[0];
+
+if (!buildTargetRelease && !buildTargetDebug) {
+    throw new Error('No build targets found');
+}
+
+if (!buildTargetDebug) {
+    buildTargetDebug = buildTargetRelease;
+} else if (!buildTargetRelease) {
+    buildTargetRelease = buildTargetDebug;
+}
+
+export default defineConfig({
+    entry: {
+        main: './src/main.jsx',
+    },
+    target: ['browserslist:last 2 versions, > 0.2%, not dead, Firefox ESR'],
+    resolve: {
+        extensions: ['...', '.jsx'],
+    },
+    module: {
+        rules: [
+            crossbindWebpackPlugin.getRule(),
+            {
+                test: /\.svg$/,
+                type: 'asset',
+            },
+            {
+                test: /\.css$/,
+                type: 'css/auto',
+            },
+            {
+                test: /\.(?:js|jsx|mjs|cjs)$/,
+                use: [
+                    {
+                        loader: 'builtin:swc-loader',
+                        /** @type {import('@rspack/core').SwcLoaderOptions} */
+                        options: {
+                            detectSyntax: 'auto',
+                            jsc: {
+                                transform: {
+                                    react: {
+                                        runtime: 'automatic',
+                                        development: isDev,
+                                        refresh: isDev,
+                                    },
+                                },
+                            },
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [
+        crossbindWebpackPlugin,
+        new rspack.HtmlRspackPlugin({
+            template: './index.html',
+        }),
+        isDev && new ReactRefreshRspackPlugin(),
+    ],
+    devServer: crossbindWebpackPlugin.getDevServerConfig(),
+});

package/templates/web-react-rspack/src/App.css

@@ -0,0 +1,41 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a > .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/templates/web-react-rspack/src/App.jsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { initNative, Native } from './native/native.h';
+import './App.css';
+
+function App() {
+  const [message, setMessage] = useState("compiling ...");
+
+  initNative().then(async () => {
+    setMessage(await Native.sample());
+  });
+
+  return (
+    <div className="App">
+      <p>Matrix multiplier with c++ &nbsp;&nbsp;=&gt;&nbsp;&nbsp; {message}</p>
+    </div>
+  );
+}
+
+export default App;

package/templates/web-react-rspack/src/index.css

@@ -0,0 +1,70 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/web-react-rspack/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/templates/web-react-rspack/src/native/native.cpp

@@ -0,0 +1,9 @@
+#include "native.h"
+#include <Matrix.h>
+
+std::string Native::sample() {
+    auto firstMatrix = std::make_shared<Matrix>(9, 1);
+    auto secondMatrix = std::make_shared<Matrix>(9, 2);
+    auto resultStr = std::to_string(firstMatrix->multiple(secondMatrix)->get(0));
+    return "J₃ * (2*J₃) = " + resultStr + "*J₃";
+}

package/templates/web-react-rspack/src/native/native.h

@@ -0,0 +1,12 @@
+#ifndef _NATIVE_H
+#define _NATIVE_H
+
+#include <string>
+#include <memory>
+
+class Native {
+public:
+    static std::string sample();
+};
+
+#endif

package/templates/web-react-vite/CHANGELOG.md

@@ -0,0 +1,34 @@
+# @crossbind/example-web-react-vite
+
+## 2.0.0-beta.50
+
+### Patch Changes
+
+- Aligned on the 2.0.0-beta.50 baseline. No source change; the version exists so every package in
+  the workspace names the same release.
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @crossbind/plugin-vite@1.0.2
+
+## 1.0.0
+
+### Major Changes
+
+- 🚀 first stable release
+
+### Patch Changes
+
+- Updated dependencies
+  - @crossbind/example-lib-prebuilt-matrix@1.0.0
+
+## 1.0.0-beta.12
+
+### Patch Changes
+
+- chore: add initial version of CHANGELOGS files
+- Updated dependencies
+  - @crossbind/example-lib-prebuilt-matrix@1.0.0-beta.32

package/templates/web-react-vite/README.md

@@ -0,0 +1,38 @@
+# @crossbind/example-web-react-vite
+**crossbind React Vite sample**  
+
+<a href="https://www.npmjs.com/package/@crossbind/example-web-react-vite">
+    <img alt="NPM version" src="https://img.shields.io/npm/v/@crossbind/example-web-react-vite?style=for-the-badge" />
+</a>
+<a href="https://github.com/crossbind/crossbind/blob/main/LICENSE">
+    <img alt="License" src="https://img.shields.io/github/license/crossbind/crossbind?style=for-the-badge" />
+</a>
+<a href="https://crossbind.dev/docs/guide/integrate-into-existing-project/vite">
+    <img alt="Docs - Vite" src="https://img.shields.io/badge/Docs_-_Vite-20B2AA?style=for-the-badge" />
+</a>
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [crossbind - Prerequisites](https://crossbind.dev/docs/guide/getting-started/prerequisites) instructions.
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm run dev
+```
+
+Build the app for production:
+
+```bash
+pnpm run build
+```

package/templates/web-react-vite/crossbind.config.js

@@ -0,0 +1,13 @@
+import Matrix from '@crossbind/example-lib-prebuilt-matrix/crossbind.config.js';
+
+export default {
+    general: {
+        name: 'crossbind-example-web-react-vite',
+    },
+    dependencies: [
+        Matrix,
+    ],
+    paths: {
+        config: import.meta.url,
+    },
+};

package/templates/web-react-vite/e2e/crossbind.spec.cjs

@@ -0,0 +1,7 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('check string receiving from c++', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByText('Matrix multiplier with c++   =>   J₃ * (2*J₃) = 6*J₃')).toBeVisible()
+});

package/templates/web-react-vite/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

package/templates/web-react-vite/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>