@rettangoli/fe 0.0.3 → 0.0.4

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@rettangoli/fe",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Frontend framework for building reactive web components",
   "type": "module",
   "main": "./src/index.js",
   "keywords": ["frontend", "reactive", "components", "web", "framework"],
   "files": [
-    "src/*.js",
-    "src/!(cli)",
+    "src",
     "README.md",
     "LICENSE"
   ],

package/src/cli/blank/blank.handlers.js

@@ -0,0 +1,8 @@
+
+export const handleOnMount = (deps) => {
+  //
+}
+
+export const handlerSomeEvent = (e, deps) => {
+  //
+}

package/src/cli/blank/blank.store.js

@@ -0,0 +1,18 @@
+export const INITIAL_STATE = Object.freeze({
+  // 
+});
+
+export const toViewData = ({ state, props }) => {
+  return state;
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const setState = (state) => {
+  // do doSomething
+}
+
+
+

package/src/cli/blank/blank.view.yaml

@@ -0,0 +1,16 @@
+elementName: custom-blank
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties: {}
+
+refs: {}
+
+events: {}
+
+template:
+  - rtgl-view w=f h=f p=md:
+    - rtgl-text s=h2: blank

package/src/cli/build.js

@@ -0,0 +1,133 @@
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+} from "node:fs";
+
+import esbuild from "esbuild";
+import { load as loadYaml } from "js-yaml";
+import { parse } from 'jempl';
+import { extractCategoryAndComponent } from '../common.js';
+import { getAllFiles } from '../commonBuild.js';
+
+function capitalize(word) {
+  return word ? word[0].toUpperCase() + word.slice(1) : word;
+}
+
+// Function to process view files - loads YAML and creates temporary JS file
+export const writeViewFile = (view, category, component) => {
+  // const { category, component } = extractCategoryAndComponent(filePath);
+  
+  const dir = `./.temp/${category}`;
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+  writeFileSync(
+    `${dir}/${component}.view.js`,
+    `export default ${JSON.stringify(view)};`,
+  );
+};
+
+export const bundleFile = async (options) => {
+  const { outfile = "./viz/static/main.js" } = options;
+  await esbuild.build({
+    entryPoints: ["./.temp/dynamicImport.js"],
+    bundle: true,
+    minify: false,
+    sourcemap: true,
+    outfile: outfile,
+    format: "esm",
+    loader: {
+      ".wasm": "binary",
+    },
+  });
+};
+
+const buildRettangoliFrontend = async (options) => {
+  console.log("running build with options", options);
+
+  const { dirs = ["./example"], outfile = "./viz/static/main.js", setup = "setup.js" } = options;
+
+  const allFiles = getAllFiles(dirs).filter((filePath) => {
+    return (
+      filePath.endsWith(".store.js") ||
+      filePath.endsWith(".handlers.js") ||
+      filePath.endsWith(".view.yaml")
+    );
+  });
+
+  let output = "";
+
+  const categories = [];
+  const imports = {};
+
+  // unique identifier needed for replacing
+  let count = 10000000000;
+
+  const replaceMap = {};
+
+  for (const filePath of allFiles) {
+    const { category, component, fileType } =
+      extractCategoryAndComponent(filePath);
+
+    if (!imports[category]) {
+      imports[category] = {};
+    }
+
+    if (!imports[category][component]) {
+      imports[category][component] = {};
+    }
+
+    if (!categories.includes(category)) {
+      categories.push(category);
+    }
+
+    if (["handlers", "store"].includes(fileType)) {
+      output += `import * as ${component}${capitalize(
+        fileType,
+      )} from '../${filePath}';\n`;
+
+      replaceMap[count] = `${component}${capitalize(fileType)}`;
+      imports[category][component][fileType] = count;
+      count++;
+    } else if (["view"].includes(fileType)) {
+      const view = loadYaml(readFileSync(filePath, "utf8"));
+      view.template = parse(view.template);
+      writeViewFile(view, category, component);
+      output += `import ${component}${capitalize(
+        fileType,
+      )} from './${category}/${component}.view.js';\n`;
+      replaceMap[count] = `${component}${capitalize(fileType)}`;
+
+      imports[category][component][fileType] = count;
+      count++;
+    }
+  }
+
+  output += `
+import { createComponent } from 'rettangoli-fe';
+import { deps, patch, h } from '../${setup}';
+const imports = ${JSON.stringify(imports, null, 2)};
+
+Object.keys(imports).forEach(category => {
+  Object.keys(imports[category]).forEach(component => {
+    const webComponent = createComponent({ ...imports[category][component], patch, h }, deps[category])
+    customElements.define(imports[category][component].view.elementName, webComponent);
+  })
+})
+
+`;
+
+  Object.keys(replaceMap).forEach((key) => {
+    output = output.replace(key, replaceMap[key]);
+  });
+
+  writeFileSync("./.temp/dynamicImport.js", output);
+
+  await bundleFile({ outfile });
+
+  console.log(`Build complete. Output file: ${outfile}`);
+};
+
+export default buildRettangoliFrontend;

package/src/cli/examples.js

@@ -0,0 +1,158 @@
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+
+import { load as loadYaml, loadAll } from "js-yaml";
+import { render, parse } from "jempl";
+
+import {
+  extractCategoryAndComponent,
+  flattenArrays,
+} from "../common.js";
+import { getAllFiles } from "../commonBuild.js";
+import path, { dirname } from "node:path";
+
+const yamlToHtml = (renderedView) => {
+  const processNode = (node) => {
+    if (typeof node === "string") {
+      return node;
+    }
+
+    if (Array.isArray(node)) {
+      return node.map(processNode).join("");
+    }
+
+    if (typeof node === "object" && node !== null) {
+      return Object.entries(node)
+        .map(([key, value]) => {
+          // Parse the key to extract element info
+          const [elementPart, ...attributeParts] = key.split(" ");
+          const [tagName, idPart] = elementPart.split("#");
+
+          // Use tag name as-is
+          const actualTagName = tagName;
+
+          // Build attributes
+          const attributes = [];
+
+          // Add id if present
+          if (idPart) {
+            attributes.push(`id="${idPart}"`);
+          }
+
+          // Parse other attributes from the key
+          const attrString = attributeParts.join(" ");
+          if (attrString) {
+            // Handle quoted attributes with regex
+            const quotedMatches = attrString.match(/(\w+)="([^"]+)"/g);
+            if (quotedMatches) {
+              quotedMatches.forEach(match => {
+                attributes.push(match);
+              });
+            }
+
+            // Handle shorthand attributes (key=value format without quotes)
+            const shorthandRegex = /(\w+)=([^\s"]+)/g;
+            let shorthandMatch;
+            const quotedAttributeNames = new Set();
+            
+            // First, collect all quoted attribute names to avoid duplicates
+            if (quotedMatches) {
+              quotedMatches.forEach(match => {
+                const matchResult = match.match(/(\w+)="[^"]+"/);
+                if (matchResult) {
+                  const [, attrName] = matchResult;
+                  quotedAttributeNames.add(attrName);
+                }
+              });
+            }
+            
+            // Then add shorthand attributes that aren't already quoted
+            while ((shorthandMatch = shorthandRegex.exec(attrString)) !== null) {
+              const [, attrName, attrValue] = shorthandMatch;
+              if (!quotedAttributeNames.has(attrName)) {
+                attributes.push(`${attrName}="${attrValue}"`);
+              }
+            }
+
+            // Handle standalone attributes (attributes without values)
+            const remainingAttrs = attrString
+              .replace(/(\w+)="[^"]+"/g, '') // Remove quoted attributes
+              .replace(/(\w+)=[^\s"]+/g, '') // Remove shorthand attributes
+              .trim()
+              .split(/\s+/)
+              .filter(attr => attr.length > 0);
+            
+            remainingAttrs.forEach(attr => {
+              if (attr && !attr.includes('=')) {
+                attributes.push(attr);
+              }
+            });
+          }
+
+          const attrStr =
+            attributes.length > 0 ? " " + attributes.join(" ") : "";
+
+          // Handle self-closing elements
+          if (value === null) {
+            if (actualTagName === "input") {
+              return `<${actualTagName}${attrStr} />`;
+            }
+            return `<${actualTagName}${attrStr}></${actualTagName}>`;
+          }
+
+          // Handle elements with content
+          const content = processNode(value);
+          return `<${actualTagName}${attrStr}>${content}</${actualTagName}>`;
+        })
+        .join("");
+    }
+
+    return "";
+  };
+
+  return processNode(renderedView);
+};
+
+const examples = (options = {}) => {
+  const { dirs, outputDir } = options;
+
+  const allFiles = getAllFiles(dirs);
+
+  const output = [];
+
+  const examplesFiles = allFiles
+    .filter((filePath) => {
+      return filePath.endsWith(".examples.yaml");
+    })
+    .map((filePath) => {
+      const viewFilePath = filePath.replace(".examples.yaml", ".view.yaml");
+      const { category, component, fileType } =
+        extractCategoryAndComponent(filePath);
+      const [config, ...examples] = loadAll(readFileSync(filePath, "utf8"));
+      const { template } = loadYaml(readFileSync(viewFilePath, "utf8"));
+
+      for (const [index, example] of examples.entries()) {
+        const { name, viewData } = example;
+        const ast = parse(template);
+        const renderedView = flattenArrays(render({ ast, data: viewData }));
+        const html = yamlToHtml(renderedView);
+        output.push({
+          category,
+          component,
+          index,
+          html,
+          name,
+        });
+      }
+    });
+
+  for (const { category, component, index, html, name } of output) {
+    const fileName = path.join(outputDir, category, component, `${name}.html`);
+    mkdirSync(dirname(fileName), { recursive: true });
+    const addfrontMatter = (content) => {
+      return `---\ntitle: ${component}-${index}\n---\n\n${content}`;
+    };
+    writeFileSync(fileName, addfrontMatter(html));
+  }
+};
+
+export default examples;

package/src/cli/index.js

@@ -0,0 +1,11 @@
+import build from './build.js';
+import scaffold from './scaffold.js';
+import watch from './watch.js';
+import examples from './examples.js';
+
+export {
+  build,
+  scaffold,
+  watch,
+  examples
+}

package/src/cli/scaffold.js

@@ -0,0 +1,43 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+// only have blank template now. may add more later
+const templateDir = path.join(__dirname, 'blank');
+
+const scaffoldPage = (options) => {
+  const { dir, category, componentName } = options;
+  const targetDir = path.join(dir, category, componentName);
+
+  if (fs.existsSync(targetDir)) {
+    console.log(`Stopping because ${targetDir} already exists`);
+    return;
+  }
+
+  fs.mkdirSync(targetDir, { recursive: true });
+
+  const files = fs.readdirSync(templateDir);
+  files.forEach(file => {
+    const sourcePath = path.join(templateDir, file);
+    const targetPath = path.join(targetDir, file.replace('blank', componentName));
+
+    // If it's a directory, copy recursively
+    if (fs.statSync(sourcePath).isDirectory()) {
+      fs.cpSync(sourcePath, targetPath, { recursive: true });
+    } else {
+      // Read file content
+      let content = fs.readFileSync(sourcePath, 'utf8');
+      
+      // Replace all occurrences of 'blank' with componentName in the content
+      content = content.replace(/blank/g, componentName);
+      
+      // Write to new file
+      fs.writeFileSync(targetPath, content);
+    }
+  });
+
+  console.log(`Successfully scaffolded ${targetDir} from template`);
+}
+
+export default scaffoldPage;

package/src/cli/watch.js

@@ -0,0 +1,66 @@
+import { readFileSync, watch } from "node:fs";
+import path from "node:path";
+
+import { load as loadYaml } from "js-yaml";
+import { createServer } from 'vite'
+import { writeViewFile } from './build.js';
+import buildRettangoliFrontend from './build.js';
+import { extractCategoryAndComponent } from '../common.js';
+
+
+const setupWatcher = (directory) => {
+  watch(
+    directory,
+    { recursive: true },
+    async (event, filename) => {
+      console.log(`Detected ${event} in ${directory}/${filename}`);
+      if (filename) {
+        try {
+          if (filename.endsWith('.view.yaml')) {
+            const view = loadYaml(readFileSync(path.join(directory, filename), "utf8"));
+            const { category, component } = extractCategoryAndComponent(filename);
+            await writeViewFile(view, category, component);
+          }
+          await buildRettangoliFrontend({ dirs: [directory] });
+        } catch (error) {
+          console.error(`Error processing ${filename}:`, error);
+          // Keep the watcher running
+        }
+      }
+    },
+  );
+};
+
+async function startViteServer(options) {
+  const { port = 3001, root = './viz/static' } = options;
+  try {
+    const server = await createServer({
+      // any valid user config options, plus `mode` and `configFile`
+      // configFile: false,
+      root,
+      server: {
+        port,
+      },
+    });
+    await server.listen();
+
+    server.printUrls();
+    server.bindCLIShortcuts({ print: true });
+  } catch (error) {
+    console.error("Error during Vite server startup:", error);
+    process.exit(1);
+  }
+}
+
+
+const startWatching = (options) => {
+  const { dirs = ['src'], port = 3001 } = options;
+
+  dirs.forEach(dir => {
+    setupWatcher(dir);
+  });
+
+  startViteServer({ port });
+}
+
+export default startWatching;