Adding hotfixes for packages

jsx-html/examples/00.tsx

@@ -0,0 +1,6 @@
+/// <reference path="https://raw.githubusercontent.com/apiel/jsx-html/latest/jsx.d.ts" />
+
+import { React } from 'https://raw.githubusercontent.com/apiel/jsx-html/latest/mod.ts';
+
+const View = () => <div>Hello</div>;
+console.log((<View />).render());

jsx-html/examples/01.tsx

@@ -0,0 +1,62 @@
+/// <reference path="../jsx.d.ts" />
+
+import { assertEquals } from 'https://deno.land/std/testing/asserts.ts';
+import { React, Fragment } from '../mod.ts';
+
+const Title = () => <h1>title</h1>;
+const Value = ({ val }: { val: string }) => <p>value: {val}</p>;
+const Numeric = ({ num }: { num: number }) => <p>num: {num}</p>;
+
+const View = () => (
+    <div class="deno">
+        <Title />
+        <p onclick={() => 'lol'} valid checked={true} select="">
+            land
+        </p>
+        <br />
+        <hr />
+        <Fragment>
+            <Value val="hello" />
+            <Numeric num={23} />
+        </Fragment>
+    </div>
+);
+
+if (import.meta.main) {
+    (<View />).render().then(console.log);
+} else {
+    // Run test
+
+    Deno.test('render title', async() => {
+        assertEquals(await (<Title />).render(), '<h1>title</h1>');
+    });
+
+    Deno.test('render value', async() => {
+        const val = 'hello';
+        assertEquals(await (<Value val={val} />).render(), `<p>value: ${val}</p>`);
+    });
+
+    Deno.test('render numeric', async() => {
+        const num = 123;
+        assertEquals(await (<Numeric num={num} />).render(), `<p>num: ${num}</p>`);
+    });
+
+    Deno.test('render view', async() => {
+        assertEquals(
+            await (<View />).render(),
+            '<div class="deno"><h1>title</h1><p valid checked select>land</p><br /><hr /><p>value: hello</p><p>num: 23</p></div>',
+        );
+    });
+
+    Deno.test('render empty', async ()=>{
+        assertEquals(
+            await (<div/>).render(),
+            `<div></div>`
+        )
+
+        assertEquals(
+            await (<img/>).render(),
+            `<img />`
+        )
+    })
+}

jsx-html/examples/02/02.tsx

@@ -0,0 +1,6 @@
+/// <reference path="../../jsx.d.ts" />
+
+import { jsx } from '../../mod.ts';
+
+const View = () => <div>Hello</div>;
+(<View />).render().then(console.log);

jsx-html/examples/02/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "jsx": "react",
+        "jsxFactory": "jsx"
+    }
+}

jsx-html/examples/03-async.tsx

@@ -0,0 +1,30 @@
+/// <reference path="../jsx.d.ts" />
+
+import { assertEquals } from 'https://deno.land/std/testing/asserts.ts';
+import { delay } from 'https://deno.land/std/async/delay.ts';
+import { React } from '../mod.ts';
+
+const Title = async () => {
+    await delay(100);
+return <h1>title{ await delay(100) }</h1>;
+};
+
+const View = () => (
+    <div>
+        <Title />
+    </div>
+);
+
+if (import.meta.main) {
+    (<View />).render().then(console.log);
+} else {
+    // Run test
+
+    Deno.test('render title', async () => {
+        assertEquals(await (<Title />).render(), '<h1>title</h1>');
+    });
+
+    Deno.test('render view', async () => {
+        assertEquals(await (<View />).render(), '<div><h1>title</h1></div>');
+    });
+}

jsx-html/examples/04.tsx

@@ -0,0 +1,9 @@
+/// <reference path="../jsx.d.ts" />
+
+import { React } from '../mod.ts';
+
+const View = () => <div>Hello</div>;
+
+if (import.meta.main) {
+    (<View />).render().then(console.log);
+}

jsx-html/examples/05.tsx

@@ -0,0 +1,27 @@
+/// <reference path="../jsx.d.ts" />
+import { assertEquals } from 'https://deno.land/std/testing/asserts.ts';
+
+import { React } from '../mod.ts';
+
+const View = () => {
+    const techs = ['NodeJS', 'React Native', 'Next'];
+
+    return (
+        <ul>
+            {techs.map((tech: any) => (
+                <li>{tech}</li>
+            ))}
+        </ul>
+    );
+};
+
+if (import.meta.main) {
+    (<View />).render().then(console.log);
+} else {
+    Deno.test('render with array', async () => {
+        assertEquals(
+            await (<View />).render(),
+            '<ul><li>NodeJS</li><li>React Native</li><li>Next</li></ul>',
+        );
+    });
+}

jsx-html/examples/06.tsx

@@ -0,0 +1,19 @@
+/// <reference path="../jsx.d.ts" />
+import { assertEquals } from 'https://deno.land/std/testing/asserts.ts';
+
+import { React } from '../mod.ts';
+
+const View = () => {
+    return <div innerHTML="<b>hello</b> world" />;
+};
+
+if (import.meta.main) {
+    (<View />).render().then(console.log);
+} else {
+    Deno.test('render with array', async () => {
+        assertEquals(
+            await (<View />).render(),
+            '<div><b>hello</b> world</div>',
+        );
+    });
+}

jsx-html/examples/browser/dist/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Page Title</title>
+  </head>
+  <body>
+
+    <script src="index.js"></script>
+
+    <div id="div-container" />
+
+    <script>
+      demo.Test().render('#div-container').then((html) => {
+        document.getElementById('div-container').innerHTML = html;
+      });
+    </script>
+
+  </body>
+</html>

jsx-html/examples/browser/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "jsx-to-html-testing",
+  "version": "1.0.0",
+  "description": "jsx-to-html-testing",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch",
+    "start": "webpack-dev-server --open",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "Alex",
+  "license": "ISC",
+  "devDependencies": {
+    "ts-loader": "^8.0.1",
+    "typescript": "^3.9.7",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "async-jsx-html": "^1.2.1"
+  }
+}

jsx-html/examples/browser/src/index.tsx

@@ -0,0 +1,5 @@
+import { jsx, ElementNode } from 'async-jsx-html';
+
+export function Test(): ElementNode {
+    return <div>Hello World</div>;
+}

jsx-html/examples/browser/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "module": "commonjs",
+    "jsx": "react",
+    "jsxFactory": "jsx",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "lib": [
+      "es6",
+      "dom"
+    ]
+  }
+}

jsx-html/examples/browser/webpack.config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const MODULE_NAME = 'demo';
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    index: './src/index.tsx'
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ],
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'umd',
+    globalObject: 'this',
+    // libraryExport: 'default',
+    library: MODULE_NAME
+  },
+};

jsx-html/examples/node_01.js

@@ -0,0 +1,30 @@
+let {
+  React,
+  Fragment
+} = require('../nodejs/mod');
+
+const Title = () => /*#__PURE__*/React.createElement("h1", null, "title");
+
+const Value = ({
+  val
+}) => /*#__PURE__*/React.createElement("p", null, "value: ", val);
+
+const Numeric = ({
+  num
+}) => /*#__PURE__*/React.createElement("p", null, "num: ", num);
+
+const View = () => /*#__PURE__*/React.createElement("div", {
+  class: "deno"
+}, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement("p", {
+  onclick: () => 'lol',
+  valid: true,
+  checked: true,
+  select: ""
+}, "land"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Value, {
+  val: "hello"
+}), /*#__PURE__*/React.createElement(Numeric, {
+  num: 23
+})));
+
+/*#__PURE__*/
+React.createElement(View, null).render().then(console.log);

jsx-html/examples/node_01.jsx

@@ -0,0 +1,22 @@
+let { React, Fragment } = require('../nodejs/mod');
+
+const Title = () => <h1>title</h1>;
+const Value = ({ val }) => <p>value: {val}</p>;
+const Numeric = ({ num }) => <p>num: {num}</p>;
+
+const View = () => (
+    <div class="deno">
+        <Title />
+        <p onclick={() => 'lol'} valid checked={true} select="">
+            land
+        </p>
+        <br />
+        <hr />
+        <Fragment>
+            <Value val="hello" />
+            <Numeric num={23} />
+        </Fragment>
+    </div>
+);
+
+(<View />).render().then(console.log);