From 68e366abeb911699805da12fee311c3e2ef1886c Mon Sep 17 00:00:00 2001 From: Brian M Hunt Date: Sat, 3 Jul 2021 15:19:45 -0400 Subject: [PATCH 1/5] examples) add the-time example Per: https://codesandbox.io/s/tko-sample-upy4z --- examples/the-time/.babelrc | 34 +++++++++++++++++++++++++++ examples/the-time/entry.ts | 9 +++++++ examples/the-time/index.html | 14 +++++++++++ examples/the-time/package.json | 11 +++++++++ examples/the-time/sandbox.config.json | 7 ++++++ examples/the-time/tko.ts | 5 ++++ examples/the-time/tsconfig.json | 16 +++++++++++++ 7 files changed, 96 insertions(+) create mode 100644 examples/the-time/.babelrc create mode 100644 examples/the-time/entry.ts create mode 100644 examples/the-time/index.html create mode 100644 examples/the-time/package.json create mode 100644 examples/the-time/sandbox.config.json create mode 100644 examples/the-time/tko.ts create mode 100644 examples/the-time/tsconfig.json diff --git a/examples/the-time/.babelrc b/examples/the-time/.babelrc new file mode 100644 index 00000000..21cca430 --- /dev/null +++ b/examples/the-time/.babelrc @@ -0,0 +1,34 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": "chrome 70" + } + ] + ], + "plugins": [ + [ + "@babel/plugin-transform-typescript", + { + "isTSX": true + } + ], + [ + "transform-runtime", + { + "regenerator": true + } + ], + [ + "@babel/plugin-transform-react-jsx", + { + "useBuiltIns": true, + "pragma": "ko.jsx.createElement", + "pragmaFrag": "ko.jsx.Fragment", + "throwIfNamespace": false + } + ] + ], + "parserOpts": {} +} diff --git a/examples/the-time/entry.ts b/examples/the-time/entry.ts new file mode 100644 index 00000000..be42ac14 --- /dev/null +++ b/examples/the-time/entry.ts @@ -0,0 +1,9 @@ +import tko from "./tko"; + +import "./the-time"; + +console.log("Entry."); + +tko.cleanNode(document.body); + +tko.applyBindings(); diff --git a/examples/the-time/index.html b/examples/the-time/index.html new file mode 100644 index 00000000..c739a980 --- /dev/null +++ b/examples/the-time/index.html @@ -0,0 +1,14 @@ + + + + + + TKO Example + + + +

Hello

+ + + + diff --git a/examples/the-time/package.json b/examples/the-time/package.json new file mode 100644 index 00000000..5a63a6e6 --- /dev/null +++ b/examples/the-time/package.json @@ -0,0 +1,11 @@ +{ + "dependencies": { + "@babel/core": "7.14.6", + "@babel/plugin-transform-typescript": "7.14.6", + "@tko/build.reference": "4.0.0-alpha9.0" + }, + "private": true, + "keywords": [], + "name": "tko-the-time", + "description": "" +} diff --git a/examples/the-time/sandbox.config.json b/examples/the-time/sandbox.config.json new file mode 100644 index 00000000..016fddd1 --- /dev/null +++ b/examples/the-time/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": true, + "view": "browser", + "disableLogging": false, + "template": "parcel" +} diff --git a/examples/the-time/tko.ts b/examples/the-time/tko.ts new file mode 100644 index 00000000..fd3d35df --- /dev/null +++ b/examples/the-time/tko.ts @@ -0,0 +1,5 @@ +import tko from "@tko/build.reference/dist/build.reference.es6"; + +globalThis.ko = tko; + +export default tko; diff --git a/examples/the-time/tsconfig.json b/examples/the-time/tsconfig.json new file mode 100644 index 00000000..99a3a24a --- /dev/null +++ b/examples/the-time/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "commonjs", + "jsx": "preserve", + "esModuleInterop": true, + "sourceMap": true, + "allowJs": true, + "lib": [ + "es6", + "dom" + ], + "rootDir": "src", + "moduleResolution": "node", + "target": "esnext" + } +} From 264a456bcc36937e17c3816dac19b490eb91de3b Mon Sep 17 00:00:00 2001 From: Brian M Hunt Date: Sat, 3 Jul 2021 15:23:23 -0400 Subject: [PATCH 2/5] examples) update the-time text, etc. --- examples/the-time/{entry.ts => entry.tsx} | 0 examples/the-time/index.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename examples/the-time/{entry.ts => entry.tsx} (100%) diff --git a/examples/the-time/entry.ts b/examples/the-time/entry.tsx similarity index 100% rename from examples/the-time/entry.ts rename to examples/the-time/entry.tsx diff --git a/examples/the-time/index.html b/examples/the-time/index.html index c739a980..cbfccb72 100644 --- a/examples/the-time/index.html +++ b/examples/the-time/index.html @@ -7,7 +7,7 @@ -

Hello

+

The time is:

From edebab1849bb6f4b75eb3b0dea3538f3684f7bcf Mon Sep 17 00:00:00 2001 From: Brian M Hunt Date: Sat, 3 Jul 2021 15:27:02 -0400 Subject: [PATCH 3/5] examples) consolidate TSX --- examples/the-time/entry.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/examples/the-time/entry.tsx b/examples/the-time/entry.tsx index be42ac14..0e53589f 100644 --- a/examples/the-time/entry.tsx +++ b/examples/the-time/entry.tsx @@ -1,9 +1,16 @@ import tko from "./tko"; -import "./the-time"; - console.log("Entry."); -tko.cleanNode(document.body); +class TheTime extends tko.Component { + get template() { + const date = new Date().toISOString(); + return
{date}
; + } +} +tko.components.unregister("the-time"); +TheTime.register("the-time"); + +tko.cleanNode(document.body); tko.applyBindings(); From 10aa2419e2606ad23b5560abeae1f279c749986e Mon Sep 17 00:00:00 2001 From: Brian M Hunt Date: Sat, 3 Jul 2021 15:31:23 -0400 Subject: [PATCH 4/5] examples) Update the-time language ... to test push-to-codesandbox --- examples/the-time/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/the-time/index.html b/examples/the-time/index.html index cbfccb72..eb17b80e 100644 --- a/examples/the-time/index.html +++ b/examples/the-time/index.html @@ -7,7 +7,7 @@ -

The time is:

+

The time on refresh was:

From 8d5b42ab1e1996b26a15b80953ad95c3c47fbc98 Mon Sep 17 00:00:00 2001 From: Brian M Hunt Date: Sat, 3 Jul 2021 21:00:57 -0400 Subject: [PATCH 5/5] examples) add await for cleanNode --- examples/the-time/entry.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/examples/the-time/entry.tsx b/examples/the-time/entry.tsx index 0e53589f..26541827 100644 --- a/examples/the-time/entry.tsx +++ b/examples/the-time/entry.tsx @@ -12,5 +12,12 @@ class TheTime extends tko.Component { tko.components.unregister("the-time"); TheTime.register("the-time"); -tko.cleanNode(document.body); -tko.applyBindings(); +const applyBindings = async () => { + // We usually don't need to cleanNode before + // applying bindings, but it's needed for + // codesandbox.io + await tko.cleanNode(document.body); + tko.applyBindings(); +} + +applyBindings()