Many improvements

jsx/meta.json

@@ -1,9 +1,14 @@
 {
    "name": "@denreg-jsx",
-  "version": "0.1.0",
+   "version": "0.1.1",
    "description": "Denreg JSX renderer",
    "author": "Fabian Stamm <dev@fabianstamm.de>",
    "contributors": [],
    "deprecated": false,
-  "files": ["**/*.ts", "**/*.js", "tsconfig.json", "README.md"]
+   "files": [
+      "**/*.ts",
+      "**/*.js",
+      "tsconfig.json",
+      "README.md"
+   ]
 }

jsx/mod.ts

@@ -83,7 +83,6 @@ async function renderHTML(element: Element) {
   if (typeof element.component !== "string")
     throw new Error("Internal consistency error");
 
-  console.log("Element:", element.component);
   let props = "";
 
   for (const key in element.props) {
@@ -101,7 +100,6 @@ async function renderHTML(element: Element) {
       inner = element.props["innerHTML"];
     } else {
       const children = cleanChildren(element.children);
-      if (tag == "body") console.log(element.children, children);
       inner = (
         await Promise.all(children.map((child) => renderSSR(child)))
       ).join("");
@@ -114,7 +112,6 @@ async function renderCustom(element: Element) {
   if (typeof element.component === "string")
     throw new Error("Internal consistency error");
 
-  console.log("Component:", element.component);
   const res = await Promise.resolve(
     element.component(
       {

registry/Dockerfile

@@ -8,4 +8,4 @@ ADD public /app/public
 RUN /usr/bin/deno cache --unstable src/registry.ts
 
 VOLUME [ "/app/data" ]
-ENTRYPOINT [ "/usr/bin/deno", "run", "-A", "--unstable", "/app/src/registry.ts" ]
+ENTRYPOINT [ "/usr/bin/deno", "run", "-A", "--unstable", "--config", "tsconfig.json", "/app/src/registry.ts" ]

registry/src/config.ts

@@ -15,6 +15,7 @@ const config =
 
 if (!config.user) config.user = {};
 if (!config.web) config.web = {};
+if (!config.general) config.general = {};
 
 const env = Deno.env.toObject();
 
@@ -47,11 +48,17 @@ for (const key in env) {
             case "WEB_TRACKING":
                config.web.tracking = env[key];
                break;
+            case "GENERAL_DEV":
+               config.general.dev = env[key] === "true";
          }
       }
    }
 }
 
+if (config.general.dev) {
+   console.warn("Dev mode active!!!");
+}
+
 console.log("Known users:", Object.keys(config.user));
 
 export default config;

registry/src/deps.ts

@@ -1,40 +1,28 @@
-export * as S3 from "https://deno.land/x/s3@0.2.0/mod.ts";
-export { S3Error } from "https://deno.land/x/s3@0.2.0/src/error.ts";
+// @deno-types="./types/hotfix.d.ts"
 
-export * as Ini from "https://deno.hibas123.de/raw/ini@0.0.1/mod.ts";
+export * as S3 from "https://deno.land/x/s3@0.3.0/mod.ts";
+export { S3Error } from "https://deno.land/x/s3@0.3.0/src/error.ts";
 
-export * as ABC from "https://deno.land/x/abc@v1/mod.ts";
-export * as CorsMW from "https://deno.land/x/abc@v1/middleware/cors.ts";
-export * as LoggerMW from "https://deno.land/x/abc@v1/middleware/logger.ts";
+export * as Ini from "https://deno.hibas123.de/raw/ini@0.0.3/mod.ts";
 
-export * as Path from "https://deno.land/std@0.74.0/path/mod.ts";
-export * as FS from "https://deno.land/std@0.74.0/fs/mod.ts";
-export * as Base64 from "https://deno.land/std@0.74.0/encoding/base64.ts";
-export * as Hash from "https://deno.land/std@0.74.0/hash/mod.ts";
-export * as Colors from "https://deno.land/std@0.74.0/fmt/colors.ts";
+export * as ABC from "https://deno.land/x/abc@v1.2.4/mod.ts";
+export * as CorsMW from "https://deno.land/x/abc@v1.2.4/middleware/cors.ts";
+export * as LoggerMW from "https://deno.land/x/abc@v1.2.4/middleware/logger.ts";
+
+export * as Path from "https://deno.land/std@0.83.0/path/mod.ts";
+export * as FS from "https://deno.land/std@0.83.0/fs/mod.ts";
+export * as Base64 from "https://deno.land/std@0.83.0/encoding/base64.ts";
+export * as Hash from "https://deno.land/std@0.83.0/hash/mod.ts";
+export * as Colors from "https://deno.land/std@0.83.0/fmt/colors.ts";
 
 export * as Compress from "https://git.stamm.me/Deno/DenReg/raw/branch/master/tar/mod.ts";
 
 export { default as Prism } from "https://cdn.skypack.dev/prismjs";
 
-// export { Marked } from "https://deno.land/x/markdown/mod.ts";
-
-// export { Marked } from "../../markdown/mod.ts";
 export { Marked } from "https://deno.hibas123.de/raw/markdown/mod.ts";
 
 import DS from "https://raw.githubusercontent.com/hibas123/dndb/master/mod.ts";
 
-/// <reference path="./types/jsx.d.ts" />
-export {
-   React,
-   jsx,
-   Fragment,
-} from "https://deno.hibas123.de/raw/jsx-html/mod.ts";
-
-// export {
-//    React,
-//    jsx,
-//    Fragment,
-// } from "https://raw.githubusercontent.com/apiel/jsx-html/master/mod.ts";
+export * as Pico from "../../jsx/mod.ts";
 
 export const Datastore = DS;

registry/src/http.ts

@@ -1,4 +1,4 @@
-/// <reference path="./types/jsx.d.ts" />
+// /// <reference path="./types/jsx.d.ts" />
 import { ABC, CorsMW, LoggerMW, Path } from "./deps.ts";
 import config from "./config.ts";
 

registry/src/renderer.tsx

@@ -1,8 +1,12 @@
 // / <reference path="./types/jsx.d.ts" />
-import { React, jsx } from "./deps.ts";
+import { Pico } from "./deps.ts";
 
 import config from "./config.ts";
 
+const React = {
+   createElement: Pico.h.bind(Pico),
+};
+
 class StringReader implements Deno.Reader {
    private data: Uint8Array;
    private offset = 0;
@@ -25,15 +29,37 @@ class StringReader implements Deno.Reader {
    }
 }
 
+type ELM = any;
+
+type Component = () => ELM;
+
+const componentCache = new Map<string, Component>();
+
+async function loadComponent(name: string) {
+   let mod = componentCache.get(name);
+   if (!mod || config.general.dev) {
+      mod = (await import(`./views/${name}.tsx`)).default;
+      if (!mod) throw new Error("Invalid component " + name);
+      componentCache.set(name, mod);
+   }
+
+   return mod;
+}
+
+const preLoad = ["index", "package", "browse_folder", "browse_file"];
+
+preLoad.forEach((page) =>
+   loadComponent(page).catch((err) => console.error("Error preloading", page))
+);
+
 export default async function render(
    name: string,
    data: any
 ): Promise<Deno.Reader> {
-   const component: {
-      default: () => JSX.IntrinsicElements | Promise<JSX.IntrinsicElements>;
-   } = await import(`./views/${name}.tsx`);
+   const Component = await loadComponent(name);
 
-   const res = await (<component.default {...data} />).render();
+   //@ts-ignore
+   const res = await Pico.renderSSR(<Component {...data} />);
 
-   return new StringReader("<!DOCTYPE html>\n" + (res as string));
+   return new StringReader("<!DOCTYPE html>\n" + res);
 }

registry/src/types/hotfix.d.ts

@@ -0,0 +1,4 @@
+// fixes an issue in std@0.80.0
+interface ReadableStream<R> {
+   getIterator(): any;
+}

registry/src/types/jsx.d.ts

@@ -1,5 +0,0 @@
-declare namespace JSX {
-   interface IntrinsicElements {
-      [elemName: string]: any;
-   }
-}

registry/src/views/_base.tsx

@@ -1,5 +1,4 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React } from "../deps.ts";
+import { Pico } from "../deps.ts";
 import config from "../config.ts";
 
 const styles = new TextDecoder().decode(

registry/src/views/_browse.tsx

@@ -1,5 +1,4 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React, Marked } from "../deps.ts";
+import { Pico, Marked } from "../deps.ts";
 import type { IPackage } from "../db.ts";
 import { sortVersions } from "../utils.ts";
 

registry/src/views/_default.tsx

@@ -1,5 +1,4 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React, Fragment } from "../deps.ts";
+import { Pico } from "../deps.ts";
 
 export function Main(a: any, children: any) {
    return (

registry/src/views/_pkgheader.tsx

@@ -1,5 +1,5 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React, Fragment, Marked } from "../deps.ts";
+// /// <reference path="../types/jsx.d.ts" />
+import { Pico, Marked } from "../deps.ts";
 import type { IPackage } from "../db.ts";
 
 export default async function index({

registry/src/views/browse_file.tsx

@@ -1,5 +1,4 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React } from "../deps.ts";
+import { Pico } from "../deps.ts";
 import Base from "./_base.tsx";
 import type { IPackage } from "../db.ts";
 

registry/src/views/browse_folder.tsx

@@ -1,5 +1,4 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React } from "../deps.ts";
+import { Pico } from "../deps.ts";
 import Base from "./_base.tsx";
 import type { IPackage } from "../db.ts";
 

registry/src/views/index.tsx

@@ -1,5 +1,4 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React, Fragment } from "../deps.ts";
+import { Pico } from "../deps.ts";
 import Base from "./_base.tsx";
 import type { IPackage } from "../db.ts";
 import { sortVersions } from "../utils.ts";

registry/src/views/package.tsx

@@ -1,5 +1,4 @@
-/// <reference path="../types/jsx.d.ts" />
-import { React, Fragment, Marked } from "../deps.ts";
+import { Pico, Marked } from "../deps.ts";
 import Base from "./_base.tsx";
 import type { IPackage } from "../db.ts";
 import { sortVersions, getFile, getAbsolutePackageVersion } from "../utils.ts";

registry/tsconfig.json

@@ -0,0 +1,10 @@
+{
+   "compilerOptions": {
+      "lib": ["dom", "dom.iterable", "esnext", "deno.ns", "deno.unstable"],
+      "jsx": "react",
+      "jsxFactory": "Pico.h",
+      "jsxFragmentFactory": "Pico.Fragment",
+      "noImplicitAny": true,
+      "strictPropertyInitialization": false
+   }
+}