Add manual testing application

3 years ago · 9c22bc28e5
parent 79c7581402
commit 9c22bc28e5
6 changed files with 5037 additions and 0 deletions
--- a/demos/justact-test/.babelrc
+++ b/demos/justact-test/.babelrc
@ -0,0 +1,11 @@
+{
+    "plugins": [
+        [
+            "@babel/plugin-transform-react-jsx",
+            {
+                "pragma": "justact.createElement"
+            }
+        ]
+    ],
+    "comments": false
+}
--- a/demos/justact-test/index.html
+++ b/demos/justact-test/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Test</title>
+    <style>
+        BODY {
+            background-color: #222;
+            color: #eee;
+        }
+    </style>
+  </head>
+  <body>
+  </body>
+</html>
+
--- a/demos/justact-test/package-lock.json
+++ b/demos/justact-test/package-lock.json
--- a/demos/justact-test/package.json
+++ b/demos/justact-test/package.json
@ -0,0 +1,28 @@
+{
+  "name": "justact-test",
+  "version": "1.0.0",
+  "description": "Manual test app for justact",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build-babel": "babel src -d dist",
+    "build-webpack": "webpack --config webpack.config.js",
+    "build": "npm run build-babel && npm run build-webpack"
+  },
+  "workspaces": [
+    "../../"
+  ],
+  "author": "Coherent Constructs",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-modules-umd": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
+    "babel-loader": "^9.1.2",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  }
+}
--- a/demos/justact-test/src/index.jsx
+++ b/demos/justact-test/src/index.jsx
@ -0,0 +1,39 @@
+// const justact = require('justact');
+import * as justact from 'justact';
+
+class InputMultiplex extends justact.Component {
+    render () {
+        console.log('InputMultiplex', this);
+        return this.swap ? (
+            <input value={this.valueB$} type="text" />
+        ) : (
+            <input value={this.valueA$} type="text" />
+        )
+    }
+}
+
+class App extends justact.Component {
+    render () {
+        return (
+            <div>
+                <input  type="checkbox" value={this.swap$} />
+                <InputMultiplex swap={this.swap$}></InputMultiplex>
+            </div>
+        )
+    }
+}
+
+// TODO: This should be a single function call;
+// maybe like: justact.append(document.body, new App())
+document.addEventListener('DOMContentLoaded', () => {
+    const root = new App({});
+    const elements = root.createElements();
+
+    console.log('app', root);
+
+    for ( const element of elements ) {
+        document.body.append(element);
+    }
+
+    root.notifyMounted({ parent: document.body });
+});
--- a/demos/justact-test/webpack.config.js
+++ b/demos/justact-test/webpack.config.js
@ -0,0 +1,44 @@
+import * as url from 'url';
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+// const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+const config = {
+  entry: "./src/index.jsx",
+  mode: "development",
+  output: {
+    path: `${__dirname}/build`,
+    filename: "bundle.js",
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "index.html",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [
+              [
+                '@babel/plugin-transform-react-jsx',
+                {
+                    "pragma": "justact.createElement"
+                }
+              ]
+            ]
+          }
+        }
+      }
+    ]
+  }
+};
+
+export default config;