knockout · brianmhunt · Jul 3, 2021 · Jul 3, 2021 · Jul 3, 2021 · Jul 3, 2021
diff --git a/examples/the-time/.babelrc 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.tsx b/examples/the-time/entry.tsx
@@ -0,0 +1,23 @@
+import tko from "./tko";
+
+console.log("Entry.");
+
+class TheTime extends tko.Component {
+  get template() {
+    const date = new Date().toISOString();
+    return <div>{date}</div>;
+  }
+}
+
+tko.components.unregister("the-time");
+TheTime.register("the-time");
+
+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()
diff --git a/examples/the-time/index.html b/examples/the-time/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TKO Example</title>
+  </head>
+
+  <body>
+    <h1>The time on refresh was:</h1>
+    <the-time />
+    <script type="module" src="./entry.tsx"></script>
+  </body>
+</html>
diff --git a/examples/the-time/package.json 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
@@ -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
@@ -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
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "rootDir": "src",
+    "moduleResolution": "node",
+    "target": "esnext"
+  }
+}