juo 0.0.1-alpha.4 → 0.0.2-pre.1

package/templates/block/preact/index.ts.liquid

@@ -1,7 +1,7 @@
-import { defineBlock, createPreactRenderer } from "@juo/core";
-import { render } from "preact";
+import { defineBlock } from "@juo/blocks";
+import { createPreactRenderer } from "@juo/blocks/preact";
 import { {{ block.clsName }} } from "./{{block.clsName}}.tsx";
-import type {  FromSchema, JSONSchema } from "json-schema-to-ts";
+import type { FromSchema, JSONSchema } from "json-schema-to-ts";
 
 const schema = {
   type: "object",
@@ -35,6 +35,5 @@ export const {{ block.clsName }}Block = defineBlock("{{ block.name }}", {
     },
     slots: {},
   }),
-  slots: [],
-  renderer: createPreactRenderer((el: HTMLElement) => render(HelloWorld, el)),
+  renderer: createPreactRenderer({{ block.clsName }}),
 });

package/templates/block/preact/{{block.clsName}}.tsx.liquid

@@ -100,8 +100,7 @@ export function {{ block.clsName }}(props: Props) {
 }
 
 {% else %}
-import "../src/styles.css";
-{{ block | json }}
+import "../../styles.css";
 const Counter = ({
   className,
   initialCount,

package/templates/block/react/index.ts.liquid

@@ -1,6 +1,5 @@
-import { defineBlock, createReactRenderer } from "@juo/orion-core";
-import { createElement } from "react";
-import { createRoot } from "react-dom/client";
+import { defineBlock } from "@juo/blocks";
+import { createReactRenderer } from "@juo/blocks/react";
 import { FromSchema, JSONSchema } from "json-schema-to-ts";
 import { {{ block.clsName }} } from "./{{ block.clsName }}.tsx";
 
@@ -35,7 +34,5 @@ export const {{ block.clsName }}Block = defineBlock<Schema>("{{ block.name }}",
     },
     slots: {},
   }),
-  renderer: createReactRenderer((block, el) => {
-    createRoot(el).render(createElement({{ block.clsName }}, block.props));
-  }),
+  renderer: createReactRenderer({{ block.clsName }}),
 });

package/templates/block/react/{{block.clsName}}.tsx.liquid

@@ -1,10 +1,9 @@
 import { useRef, useState } from "react";
 import { MantineProvider } from "@mantine/core";
 import type { Props } from ".";
-import ReactLogo from "../../assets/react-icon.svg?react";
 
-const Counter = ({ className }: { className: string }) => {
-  const [count, setCount] = useState(0);
+const Counter = ({ className, initialCount = 0 }: { className: string; initialCount?: number }) => {
+  const [count, setCount] = useState(initialCount);
   return (
     <button
       className={`px-4 py-2 rounded-md cursor-pointer ${className}`}

package/templates/tailwind/vite.config.ts.liquid

@@ -16,8 +16,18 @@ export default defineConfig({
     }),
   ],
   build: {
+    lib: {
+      entry: "src/blocks/index.ts",
+      formats: ["es"],
+      fileName: "index",
+    },
     rollupOptions: {
-      external: ["@juo/orion-core"],
+      external: [
+        "@juo/blocks",
+        "react",
+        "react-dom",
+        "preact",
+      ],
     },
   },
 });

package/dist/generate-D7J6nPBd.js

@@ -1,252 +0,0 @@
-import { Command, Flags } from "@oclif/core";
-import { isCancel, log, select, spinner, text } from "@clack/prompts";
-import { appendFileSync, existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
-import path from "node:path";
-import { detectPackageManager } from "nypm";
-import slugify from "slugify";
-import { Liquid } from "liquidjs";
-import { fileURLToPath } from "node:url";
-import { readPackageJSON } from "pkg-types";
-
-//#region src/utils/baseTemplateGenerator.ts
-var BaseTemplateGenerator = class {
-	renderTemplate(templateName, destDir, scope, fileFilter) {
-		try {
-			const templateDir = this.getTemplateDir(templateName);
-			const engine = new Liquid();
-			const files = this.getTemplateFiles(templateName);
-			const filteredFiles = fileFilter ? files.filter(fileFilter) : files;
-			for (const file of filteredFiles) {
-				const filename = engine.parseAndRenderSync(file, scope).replace(/\.liquid$/, "");
-				const tplPath = path.join(templateDir, file);
-				const destPath = path.join(destDir, filename);
-				mkdirSync(path.dirname(destPath), { recursive: true });
-				writeFileSync(destPath, engine.parseAndRenderSync(readFileSync(tplPath, "utf-8"), scope));
-			}
-		} catch (error) {
-			throw new Error(`Error rendering template ${templateName}: ${error}`);
-		}
-	}
-	getTemplateDir(name) {
-		const packageRoot = this.resolvePackageRoot();
-		return path.join(packageRoot, "templates", name);
-	}
-	getTemplateFiles(name) {
-		function scan(dirpath, baseDir) {
-			return readdirSync(dirpath).flatMap((filename) => {
-				const filepath = path.join(dirpath, filename);
-				if (statSync(filepath).isDirectory()) return scan(filepath, baseDir);
-				else return [path.relative(baseDir, filepath)];
-			});
-		}
-		const templateDir = this.getTemplateDir(name);
-		return scan(templateDir, templateDir);
-	}
-	resolvePackageRoot() {
-		let currentPath = path.dirname(fileURLToPath(import.meta.url));
-		while (!existsSync(path.join(currentPath, "package.json"))) {
-			const parentDir = path.dirname(currentPath);
-			if (parentDir === currentPath) throw new Error("Could not find package root");
-			currentPath = parentDir;
-		}
-		return currentPath;
-	}
-};
-
-//#endregion
-//#region src/utils/storyGenerator.ts
-var StoryGenerator = class extends BaseTemplateGenerator {
-	async generate(destDir, options) {
-		if (options.type === "block") await this.generateBlockTemplate(destDir, options);
-		else await this.generateThemeTemplate(destDir, options);
-	}
-	async generateBlockTemplate(destDir, options) {
-		const scope = { block: {
-			slug: slugify(options.name, { lower: true }),
-			name: options.name,
-			clsName: slugify(options.name, { lower: true }).split("-").map((item) => `${item[0].toUpperCase()}${item.substring(1)}`).join(""),
-			framework: options.framework
-		} };
-		if (["react", "preact"].includes(scope.block.framework)) {
-			if (!existsSync(destDir)) mkdirSync(destDir, { recursive: true });
-			this.renderTemplate("stories", destDir, scope);
-		} else options.logger?.("Story generation skipped");
-	}
-	async generateThemeTemplate(destDir, options) {
-		const themeScope = { theme: {
-			name: options.name,
-			slug: slugify(options.name, { lower: true }),
-			framework: options.framework,
-			clsName: slugify(options.name, { lower: true }).split("-").map((item) => `${item[0].toUpperCase()}${item.substring(1)}`).join("")
-		} };
-		if (options.framework === "react") this.renderTemplate("theme/react", destDir, themeScope, (filename) => filename.includes(".stories.tsx.liquid"));
-	}
-};
-
-//#endregion
-//#region src/utils/juoTemplateGenerator.ts
-var JuoTemplateGenerator = class extends BaseTemplateGenerator {
-	storyGenerator;
-	constructor() {
-		super();
-		this.storyGenerator = new StoryGenerator();
-	}
-	async generate(destDir, options) {
-		await this.generateBlockTemplate(destDir, options);
-	}
-	async generateBlockTemplate(destDir, options) {
-		const scope = { block: {
-			slug: slugify(options.name, { lower: true }),
-			name: options.name,
-			clsName: slugify(options.name, { lower: true }).split("-").map((item) => `${item[0].toUpperCase()}${item.substring(1)}`).join(""),
-			tailwind: options.tailwind,
-			framework: options.framework
-		} };
-		this.renderTemplate(`${options.type}/${options.framework}`, path.join(destDir, scope.block.slug), scope);
-		options.logger?.("Adding block to theme");
-		try {
-			appendFileSync(path.join(destDir, "index.ts"), `export { ${scope.block.clsName}Block } from "./${scope.block.slug}";\n`);
-		} catch (error) {
-			options.logger?.("Error adding block to theme: " + error);
-			throw error;
-		}
-		if (options.story) {
-			const projectRoot = path.dirname(path.dirname(destDir));
-			const storiesDir = path.join(projectRoot, "stories");
-			try {
-				await this.storyGenerator.generate(storiesDir, {
-					name: scope.block.name,
-					type: "block",
-					framework: options.framework,
-					tailwind: options.tailwind
-				});
-			} catch (error) {
-				options.logger?.("Error generating story: " + error);
-				throw error;
-			}
-		} else options.logger?.(`Story generation skipped (options.story = ${options.story})`);
-	}
-	appendStylesheet(destDir) {
-		this.renderTemplate("css", path.join(destDir, "src"), {});
-	}
-};
-
-//#endregion
-//#region src/utils/resolveFramework.ts
-async function resolveFramework() {
-	try {
-		const packageJson = await readPackageJSON();
-		if (!packageJson) throw new Error("Could not find package.json");
-		if (packageJson.dependencies == null) throw new Error("Could not find dependencies in package.json");
-		if ("preact" in packageJson.dependencies) return "preact";
-		return "react";
-	} catch (error) {
-		throw new Error(`Error resolving framework: ${error}`);
-	}
-}
-
-//#endregion
-//#region src/commands/generate.ts
-var Generate = class Generate extends Command {
-	static id = "generate";
-	static description = "Generate blocks for your project";
-	static flags = {
-		name: Flags.string({
-			char: "n",
-			description: "The name of the component"
-		}),
-		type: Flags.string({
-			description: "The type of the component",
-			options: ["block"],
-			default: "block"
-		}),
-		tailwind: Flags.boolean({
-			char: "t",
-			default: void 0,
-			allowNo: true
-		}),
-		verbose: Flags.boolean({
-			char: "v",
-			default: true,
-			allowNo: true
-		})
-	};
-	static examples = ["<%= config.bin %> <%= command.id %>"];
-	resolvePackageJsonPath() {
-		let currentPath = path.resolve("./");
-		while (!existsSync(path.join(currentPath, "package.json"))) {
-			const parentDir = path.dirname(currentPath);
-			if (parentDir === currentPath) throw new Error("Could not find 'package.json' in the project");
-			currentPath = parentDir;
-		}
-		return currentPath;
-	}
-	async resolveCSSFramework(dir) {
-		try {
-			const packageJson = await readPackageJSON(path.join(dir, "package.json"));
-			if (packageJson?.dependencies?.tailwindcss || packageJson?.devDependencies?.tailwindcss) return "tailwind";
-			return false;
-		} catch (error) {
-			throw new Error(`Error resolving CSS framework: ${error}`);
-		}
-	}
-	async run() {
-		const { flags } = await this.parse(Generate);
-		let rootDir;
-		const templateGenerator = new JuoTemplateGenerator();
-		try {
-			rootDir = this.resolvePackageJsonPath();
-		} catch (error) {
-			throw new Error(`Error resolving package JSON path: ${error}`);
-		}
-		const tailwind = flags.tailwind ?? await this.resolveCSSFramework(rootDir);
-		if (isCancel(flags.type ?? await select({
-			message: "What you want to create?",
-			options: [
-				{
-					value: "block",
-					label: "Block"
-				},
-				{
-					value: "page",
-					label: "Page"
-				},
-				{
-					value: "theme",
-					label: "Theme"
-				}
-			],
-			initialValue: "block"
-		}))) process.exit(0);
-		const generateSpinner = flags.verbose ? spinner() : null;
-		const blocksDir = path.join(rootDir, "src/blocks");
-		const name = flags.name ?? await text({
-			message: "What is the name of the component?",
-			initialValue: "Starter Block",
-			validate(value) {
-				if (value.length === 0) return `Value is required!`;
-			}
-		});
-		if (isCancel(name)) this.exit(0);
-		const framework = await resolveFramework();
-		generateSpinner?.start();
-		generateSpinner?.message("Detecting package manager");
-		const packageManager = await detectPackageManager(rootDir);
-		if (!packageManager) throw new Error("Could not detect package manager");
-		if (flags.verbose) log.info("Package manager detected: " + packageManager.name);
-		generateSpinner?.message("Generating block");
-		await templateGenerator.generate(blocksDir, {
-			type: "block",
-			framework,
-			name,
-			tailwind,
-			logger: (msg) => generateSpinner?.message(msg),
-			story: true
-		});
-		templateGenerator.appendStylesheet(rootDir);
-		generateSpinner?.stop("Generated block");
-	}
-};
-
-//#endregion
-export { BaseTemplateGenerator as n, Generate as t };

package/templates/block/react/state.ts.liquid

@@ -1,105 +0,0 @@
-import {
-  type ContextType,
-  createState,
-  effect,
-  injectContext,
-  provideContext,
-  Signal,
-  StateContext,
-} from "@juo/orion-core";
-
-const product1 = "https://placehold.co/600x400";
-const product2 = "https://placehold.co/600x400";
-const product3 = "https://placehold.co/600x400";
-
-type State = ContextType<typeof StateContext>;
-
-export function provideState(el: HTMLElement) {
-  provideContext(el, StateContext, createState());
-
-  const state = new Signal<State | null>(null);
-
-  setTimeout(() => {
-    const v = injectContext(el, StateContext);
-    state.value = v;
-  }, 0);
-
-  effect(() => {
-    if (state.value == null) {
-      return;
-    }
-
-    if (state.value.products.value.length === 0) {
-      state.value.addProduct({
-        id: "p1",
-        name: "Hydrating Gel Cleanser for Face and Eye Area",
-        description: "150 ml bottle",
-        price: 12.49,
-        imageUrl: product1,
-      });
-      state.value.addProduct({
-        id: "p2",
-        name: "More COLLAGEN",
-        description: "blackcurrant",
-        price: 22.6,
-        imageUrl: product2,
-      });
-      state.value.addProduct({
-        id: "p3",
-        name: "Gentle deodorant for underarms and bust",
-        description: "Green tea and jasmine",
-        price: 6.7,
-        imageUrl: product3,
-      });
-      state.value.addProduct({
-        id: "gift",
-        name: "Free summer gift",
-        description: "",
-        price: 0.0,
-        imageUrl: product3,
-      });
-    }
-
-    if (state.value.subscriptions.value.length === 0) {
-      state.value.addSubscription({
-        id: "s1",
-        items: [
-          {
-            id: "i1",
-            productId: "p1",
-            price: 12.49,
-            quantity: 2,
-          },
-          {
-            id: "i2",
-            productId: "p2",
-            price: 22.6,
-            quantity: 1,
-          },
-        ],
-        status: "active",
-        nextDeliveryDate: "2025-08-15",
-        frequency: "Every 1 month",
-        quantity: 1,
-        createdAt: "2025-04-15",
-      });
-
-      state.value.addSubscription({
-        id: "s2",
-        items: [
-          {
-            id: "i1",
-            productId: "p3",
-            price: 12.49,
-            quantity: 2,
-          },
-        ],
-        status: "active",
-        nextDeliveryDate: "2025-09-12",
-        frequency: "Every 3 months",
-        quantity: 1,
-        createdAt: "2024-04-22",
-      });
-    }
-  });
-}