🪁 kastro: add image component

.gitignore

@@ -2,7 +2,7 @@
 .kdjs_isolate
 .vscode
 *.out.js
-/build
+build
 bun.lockb
 node_modules*
 yarn.lock

kastro/README.md

@@ -19,3 +19,37 @@ Our in-house JavaScript compiler, `kdjs`, expects your code to be annotated with
 and uses this type information to perform aggressive optimizations which are not
 possible otherwise. `kdjs` internally uses the Google Closure Compiler, but it
 has many additional optimization passes and a full support for es6 modules.
+
+## Components
+
+There are 3 types of components:
+
+1. **Singleton**: Only one instance can be present in the page. These bind to the DOM when
+  you import them and can keep an arbitrary internal state. (every variable that you 
+  define in the module)
+  ```javascript
+  const State = { 1n, 2n, 3n };
+  const SingletonComp = () => <div>Singleton</div>;
+  export default SingletonComp;
+  ```
+
+2. **Stateless**: These are components that do not have any internal state besides the
+  DOM state.
+  ```javascript
+  const StatelessComp =  {
+    render: ({id}) => <div id={id}>Stateless</div>,
+    bind: (id) => { document.getElementById(id).onclick = () => alert("hi"); }
+  }
+  export default StatelessComp;
+  ```
+
+3. **Stateful**: These are components that have internal state and for each instance
+  of the component, a class instance is crated and exported.
+  ```javascript
+  class CheckBox {
+    static render({id}) { return <div id={id}>Stateful</div>; }
+    constructor(id) { this.root = document.getElementById(id); }
+    flip() {}
+  }
+  export default CheckBox;
+  ```

kastro/compiler/component.js

@@ -110,9 +110,6 @@ const compileComponent = (name, props, globals) => {
       if (globals.BuildMode > 0 && tagName.toLowerCase() == "script")
         return htmlParts.push(generateScript(tagProps, globals));
 
-      if (tagName.toLowerCase() == "img")
-        return;// htmlParts.push(generateImage(tagProps, globals));
-
       if (tagName.toLowerCase() == "link" && tagProps.rel == "stylesheet")
         return (("data-shared" in tagProps) ? globals.SharedCss : globals.PageCss)
           .add(normalizePath(tagProps.href));

kastro/compiler/image.js

@@ -0,0 +1,8 @@
+
+
+const Image = ({ src, inline }) => {
+  console.log(src, inline);
+  return <img src={src} data-inline={inline} />;
+};
+
+export { Image };

kastro/compiler/page.js

@@ -1,6 +1,8 @@
+import { plugin } from "bun";
 import { minify } from "html-minifier";
 import assert from "node:assert";
 import { readFile } from "node:fs/promises";
+import process from "node:process";
 import { optimize } from "svgo";
 import { tagYaz } from "../../util/html";
 import { getExt } from "../../util/paths";
@@ -13,11 +15,32 @@ import SvgoConfig from "./svgoConfig";
 import SvgoInlineConfig from "./svgoInlineConfig";
 import { generateStylesheet, webp } from "./targets";
 
-globalThis.GEN = true;
-globalThis.document = {};
-globalThis.document.createElement = (name) => ({
-  name
-});
+const setupEnvironment = () => {
+  const ImagePlugin = {
+    name: 'kastro image loader',
+    setup(build) {
+      const cwdLen = process.cwd().length;
+      build.onLoad({ filter: /\.svg$/ }, (args) => {
+        const code = `import { Image } from "@kimlikdao/lib/kastro/compiler/image";\n` +
+          `export default (props) => Image({...props, src: "${args.path.slice(cwdLen)}" });`;
+        return {
+          contents: code,
+          loader: "js"
+        };
+      });
+    },
+  };
+
+  plugin(ImagePlugin);
+
+  globalThis.GEN = true;
+  globalThis.document = {};
+  globalThis.document.createElement = (name) => ({
+    name
+  });
+}
+
+setupEnvironment();
 
 /**
  * @param {!Object<string, string>} attribs

kastro/compiler/targets.js

@@ -9,30 +9,26 @@ import {
 } from "../hashcache/compression";
 import { define } from "./defines";
 
-const transformChainData = (chains) => chains.split("|")
-  .map(segment => segment.split(',')[0])
-  .join("|");
-
 /**
- * @param {!Object<string, string>} attribs
- * @param {!Object<string, string>} scope
+ * @param {!Object<string, *>} props
+ * @param {!Object<string, *>} globals
  * @return {!Promise<string>} the generated script element
  */
-const generateScript = (attribs, scope) => {
-  const entry = attribs.src.slice(1);
-  const output = `build/${entry.slice(0, -3)}-${scope.dil}.js`;
+const compileScript = (props, globals) => {
+  const entry = props.src.slice(1);
+  const output = `build/${entry.slice(0, -3)}-${globals.dil}.js`;
 
   return compile({
     entry,
     output,
-    loose: "data-loose" in attribs ? true : false,
+    loose: "data-loose" in props ? true : false,
     define: [
       define("lib/util/dom", "GEN", false),
-      define("lib/util/dom", "TR", scope.dil = "tr" ? "true" : "false"),
-      define("birim/dil/birim", "KonumTR", scope.tr),
-      define("birim/dil/birim", "KonumEN", scope.en),
-      define("birim/cüzdan/birim", "Chains", transformChainData(scope.Chains)),
-      define("birim/cüzdan/birim", "DefaultChain", scope.DefaultChain)
+      define("lib/util/dom", "TR", globals.Lang == "tr" ? "true" : "false"),
+      define("birim/dil/birim", "KonumTR", globals.RouteTR),
+      define("birim/dil/birim", "KonumEN", globals.RouteEN),
+      define("birim/cüzdan/birim", "Chains", globals.Chains.map((c) => c.id)).join("|"),
+      define("birim/cüzdan/birim", "DefaultChain", globals.DefaultChain)
     ]
   }).then(() => hashAndCompressFile(output))
     .then((compressedName) => `<script src=${compressedName} type="module">`)
@@ -59,4 +55,4 @@ const webp = (inputName, outputName, passes = 10, quality = 70) =>
       "-o", outputName
     ]).exited);
 
-export { generateScript, generateStylesheet, webp };
+export { compileScript, generateStylesheet, webp };

kastro/compiler/test/birim/jsxcomp/comp.jsx

@@ -1,3 +1,4 @@
+// @jsxImportSource ../../../
 
 const fibonacci = (n) => {
   let a = 0n, b = 1n, c;

kastro/kastro.js

@@ -5,10 +5,12 @@ import { uploadWorker } from "./cloudflare/targets";
 import { readCrateRecipe } from "./crate";
 import { sayfaOku } from "./sayfa/eskiOkuyucu";
 import { compileWorker } from "./sunucu/targets";
+import { plugin } from "bun";
 
 /** @define {string} */
 const ROOT_PATH = "../../..";
 
+
 /**
  * @param {string} createDir
  * @param {!Object} env

kastro/workers/devServer.js

@@ -53,13 +53,7 @@ const serveCrate = async (crateName, buildMode) => {
 
       configureServer(server) {
         server.middlewares.use(async (req, res, next) => {
-          if (req.url.endsWith(".m.svg")) {
-            res.setHeader("content-type", "image/svg+xml");
-            compileSvg(req.url.slice(1), {
-              Lang: "en",
-              BuildMode: buildMode
-            }).then((svg) => res.end(svg));
-          } else if (req.originalUrl in map) {
+          if (req.originalUrl in map) {
             res.setHeader("content-type", "text/html;charset=utf-8");
             server.moduleGraph.invalidateAll();
             currentPage = map[req.originalUrl];