init

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "deno.enable": true
+}

app.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import * as Iso from "@eno/iso";
+
+const Comp = React.lazy(()=>import("./deep/component.tsx"));
+
+export default ()=>
+{
+    const [countGet, countSet] = React.useState(1);
+    return <div class="p-4 font-sans">
+        <Iso.Meta.Metas title="Main Page!"/>
+        <header class="max-w-4xl mx-auto">
+            <nav class="p-4 flex gap-8 border-b font-black text-sm">
+                <a class="" href="/">Home</a>
+                <a href="/about">About</a>
+                <a href="/details">Details</a>
+            </nav>
+        </header>
+
+        <main class="max-w-4xl mx-auto p-4">
+        <Iso.Switch>
+            <Iso.Case value="/">
+                <>
+                    <Iso.Meta.Metas title="Home Page" />
+                    <h1>iso: isomorphic typescript is simpler than ever.</h1>
+                    <div>
+                        <button></button>
+                    </div>
+                </>
+            </Iso.Case>
+            <Iso.Case value="about">
+                <>
+                    <h1>About</h1>
+                    <p>Iso puts the Deno runtime and ES modules to work behind the scenes to turn your next single-page React+TypeScript application into an SEO capable website <em>with full hydration</em>.</p>
+                    <p>The best part? It&apos;s all so simple you won't even even know it&apos;s there.</p>
+                    <p>Say goodbye to stylesheets and CSS-in-JS bloat. Tailwind classes are available out of the gate so you can hit the ground running, and Iso will keep up the pace with state-preserving hot module reloading. </p>
+                    <p>Batteries-included URL routing, page meta, and data fetching APIs are designed from the ground up to be as simple as possible.</p>
+                    <p>Get fully featured in seconds.</p>
+                </>
+            </Iso.Case>
+            <Iso.Case value="details">
+                <>
+                    <h1>Details</h1>
+                    <p>
+                        Iso uses Preact/Compat and Twind in lieu of React and Tailwind so you can keep the API's you know, serve less kilobytes, and gain new ways to simplify your layout code.
+                    </p>
+                    <p>While you can always:</p>
+                    <pre>
+                        {`<div className="font-serif font-bold font-italic"></div>`}
+                    </pre>
+                    <p>Now you can just:</p>
+                    <pre>
+                        {`<div class="font(serif bold italic)"></div>`}
+                    </pre>
+                    <p>
+                        Iso is a Deno project! If you're coming from a Node background be sure to:
+                    </p>
+                    <ol>
+                        <li>Get the latest Deno runtime and extension for your IDE</li>
+                        <li>Use file extensions in import statements</li>
+                        <li>Add new modules to the deno.jsonc config</li>
+                    </ol>
+                </>
+            </Iso.Case>
+            <Iso.Case value="lol/idk">lol/idk</Iso.Case>
+            <Iso.Case default><p>404!</p></Iso.Case>
+        </Iso.Switch>
+        </main>
+
+        <footer>
+            footer
+        </footer>
+
+    </div>;
+};

deep/component.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import * as Iso from "@eno/iso";
+
+export default ()=>
+{
+    const [countGet, countSet] = React.useState(1);   
+    const [routeGet, routeSet] = Iso.Router.Consumer();
+
+    type CatFact = {fact:string, length:number}|undefined;
+    const [Data, Updating] = Iso.Fetch.Use(`https://catfact.ninja/fact`);
+
+
+    console.log("component.tsx render!!")
+
+    return <div class="p-4 text-red-500">
+        <Iso.Meta.Metas title="Component!"/>
+        Component Route is: {routeGet.Path.toString()}
+        <button className="p-4 bg-green-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet+1});}}>{countGet}</button>
+        <a href="/page/about-us" className="p-2 text(lg blue-500) font-bold">a link</a>
+        <p>Data:{Data && (Data as CatFact)?.fact}</p>
+        <p>Status:{Updating?'loading':'done'}</p>
+    </div>;
+};

deno.jsonc

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {"lib": ["deno.window", "dom"]},
+    "imports":
+    {
+        "react": "https://esm.sh/stable/preact@10.13.2/compat",
+        "@eno/app": "./app.tsx",
+        "@eno/iso": "https://gitea.hptrow.me/SethTrowbridge/eno/raw/tag/0.0.2/lib/iso.tsx/"
+    },
+    "tasks": {
+        "dev": "deno run -A --unstable --no-lock app.tsx --port=3000 --dev",
+        "run": "deno run -A --unstable --no-lock app.tsx --port=8080"
+    }
+}