@granite-js/plugin-router 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,41 @@
+# @granite-js/plugin-router
+
+## 0.0.3
+
+### Patch Changes
+
+- ed4d356: changeset
+- Updated dependencies [ed4d356]
+  - @granite-js/plugin-core@0.0.3
+
+## 0.0.2
+
+### Patch Changes
+
+- 0ae09b7: deploy guide
+- 0ae09b7: type fix
+- 0ae09b7: guide
+- 0ae09b7: fix comment
+- 0ae09b7: showcase
+- 0ae09b7: refactor interface names
+- 0ae09b7: plugin-router
+- 0ae09b7: CanGoBackGuard 수정, typecheck fix, lint fix
+- 0ae09b7: counter
+- 0ae09b7: licenses
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+- Updated dependencies [0ae09b7]
+  - @granite-js/plugin-core@0.0.2
+
+## 0.0.1
+
+### Patch Changes
+
+- f47ca39: first release

package/README.md

@@ -0,0 +1,4 @@
+# @granite-js/plugin-router
+
+A Route Generator for Granite project
+

package/dist/index.cjs

@@ -0,0 +1,278 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const fs = __toESM(require("fs"));
+const path = __toESM(require("path"));
+const __swc_core = __toESM(require("@swc/core"));
+const es_toolkit = __toESM(require("es-toolkit"));
+const fs_promises = __toESM(require("fs/promises"));
+const chokidar = __toESM(require("chokidar"));
+
+//#region src/checkExportRoute.ts
+/**
+* Checks if Route is exported from the file.
+*/
+function checkExportRoute(path$1) {
+	try {
+		const ast = (0, __swc_core.parseFileSync)(path$1, {
+			syntax: "typescript",
+			tsx: true
+		});
+		const hasExportSpecifiers = ast.body.some((node) => {
+			if (node.type !== "ExportNamedDeclaration") return false;
+			return node.specifiers?.some((specifier) => {
+				if (specifier.type !== "ExportSpecifier") return false;
+				return specifier.orig?.value === "Route";
+			});
+		});
+		if (hasExportSpecifiers) return true;
+		const hasExportNamedVariable = ast.body.some((node) => {
+			if (node.type !== "ExportDeclaration") return false;
+			if (node.declaration.type !== "VariableDeclaration") return false;
+			return node.declaration.declarations.some((declaration) => declaration.id.type === "Identifier" && declaration.id.value === "Route");
+		});
+		return hasExportNamedVariable;
+	} catch {
+		return false;
+	}
+}
+
+//#endregion
+//#region src/getComponentName.ts
+function getComponentName(filePath) {
+	const path$1 = filePath.replace(/^pages\//, "").replace(/\.(tsx|ts)$/, "");
+	const segments = path$1.split("/").filter(Boolean);
+	if (segments[segments.length - 1] === "index") segments.pop();
+	const componentName = segments.map((segment) => (0, es_toolkit.pascalCase)(segment)).join("");
+	return componentName || "Index";
+}
+
+//#endregion
+//#region src/getPath.ts
+function getPath(filePath) {
+	let path$1 = filePath.replace(/^pages\//, "").replace(/\.[^/.]+$/, "");
+	if (path$1.endsWith("/index")) path$1 = path$1.replace(/\/index$/, "");
+	else if (path$1 === "index") path$1 = "";
+	return `/${path$1}`;
+}
+
+//#endregion
+//#region src/template.ts
+const NEW_ROUTE_FILE_TEMPLATE = `import React from 'react';
+import { Text, View } from 'react-native';
+import { createRoute } from '@granite-js/react-native';
+
+export const Route = createRoute('%%path%%', {
+  validateParams: (params) => params,
+  component: %%componentName%%,
+});
+
+function %%componentName%%() {
+  return (
+    <View>
+      <Text>Hello %%componentName%%</Text>
+    </View>
+  );
+}
+`;
+const ROUTER_GEN_TEMPLATE = `/* eslint-disable */
+// This file is auto-generated by @granite-js/react-native. DO NOT EDIT.
+%%pageImports%%
+
+declare module '@granite-js/react-native' {
+  interface RegisterScreen {
+%%pageRoutes%%
+  }
+}
+`;
+const NEW_LAYOUT_FILE_TEMPLATE = `import React, { PropsWithChildren } from 'react';
+
+export default function %%componentName%%Layout({ children }: PropsWithChildren) {
+  return (
+    <>
+      {children}
+    </>
+  );
+}
+`;
+
+//#endregion
+//#region src/utils/transformTemplate.ts
+/**
+* 템플릿 문자열에서 %%key%% 형식의 플레이스홀더를 values 객체의 값으로 대체합니다.
+* 제네릭 타입 T를 통해 템플릿 문자열의 플레이스홀더 키를 자동으로 추론하여 타입 안정성을 보장합니다.
+*
+* @example
+* const str = "안녕하세요 %%name%%님, 당신의 나이는 %%age%%살 입니다."
+* const result = transformTemplate(str, { name: "홍길동", age: "20" })
+* // 결과: "안녕하세요 홍길동님, 당신의 나이는 20살 입니다."
+*/
+function transformTemplate(templateString, values) {
+	let result = templateString;
+	for (const key in values) {
+		const placeholder = `%%${key}%%`;
+		result = result.replace(new RegExp(placeholder, "g"), values[key]);
+	}
+	return result;
+}
+
+//#endregion
+//#region src/generateRouterFile.ts
+function generateRouterFile() {
+	const cwd = process.cwd();
+	function getPageFiles(dir, prefix = "") {
+		const files = (0, fs.readdirSync)((0, path.join)(cwd, dir), { withFileTypes: true });
+		return files.reduce((acc, file) => {
+			if (file.isDirectory()) return [...acc, ...getPageFiles(`${dir}/${file.name}`, `${prefix}${file.name}/`)];
+			if (file.name.endsWith(".tsx") || file.name.endsWith(".ts")) {
+				const name = (0, path.parse)(file.name).name;
+				const ext = (0, path.parse)(file.name).ext;
+				return [...acc, `${prefix}${name}${ext}`];
+			}
+			return acc;
+		}, []);
+	}
+	const allPages = getPageFiles("pages");
+	const exportRouteMap = new Map(allPages.map((page) => [page, checkExportRoute((0, path.join)(cwd, "pages", page))]));
+	const pageFiles = allPages.filter((page) => !page.startsWith("_") && exportRouteMap.get(page));
+	const pageImports = pageFiles.map((page) => {
+		const componentName = getComponentName(page);
+		const pagePath = getPath(page);
+		return transformTemplate("import { Route as _%%componentName%%Route } from '../pages%%pagePath%%';", {
+			componentName,
+			pagePath
+		});
+	}).join("\n");
+	const pageRoutes = pageFiles.map((page) => {
+		const componentName = getComponentName(page);
+		const pagePath = getPath(page);
+		return transformTemplate("    '%%pagePath%%': ReturnType<typeof _%%componentName%%Route.useParams>;", {
+			componentName,
+			pagePath
+		});
+	}).join("\n");
+	const generatedContent = transformTemplate(ROUTER_GEN_TEMPLATE, {
+		pageImports,
+		pageRoutes
+	});
+	const routerFilePath = (0, path.join)(cwd, "src", "router.gen.ts");
+	if ((0, fs.existsSync)(routerFilePath)) {
+		const existingContent = (0, fs.readFileSync)(routerFilePath, "utf-8");
+		if (existingContent === generatedContent) return;
+	}
+	(0, fs.writeFileSync)(routerFilePath, generatedContent);
+	console.log("✅ Router file generated successfully!");
+}
+
+//#endregion
+//#region src/getPageName.ts
+function getPageName(filePath) {
+	const parts = filePath.split("/");
+	const indexOfPages = parts.indexOf("pages");
+	if (indexOfPages === -1) return "";
+	const relevantParts = parts.slice(indexOfPages + 1);
+	if (relevantParts.at(-1)?.startsWith("_")) relevantParts.pop();
+	const lastPart = relevantParts.at(-1);
+	if (!lastPart) return "";
+	return (0, es_toolkit.pascalCase)(lastPart);
+}
+
+//#endregion
+//#region src/transformNewRouteFile.ts
+async function transformNewRouteFile(path$1) {
+	return transformTemplate(NEW_ROUTE_FILE_TEMPLATE, {
+		path: getPath(path$1),
+		componentName: getComponentName(path$1)
+	});
+}
+async function transformNewLayoutFile(path$1) {
+	return transformTemplate(NEW_LAYOUT_FILE_TEMPLATE, { componentName: getPageName(path$1) });
+}
+
+//#endregion
+//#region src/watchRouter.ts
+function watchRouter() {
+	const watcher = chokidar.default.watch("./pages", {
+		ignored: (path$1, stats) => {
+			return Boolean(stats?.isFile() && !path$1.endsWith(".ts") && !path$1.endsWith(".tsx"));
+		},
+		ignoreInitial: true,
+		persistent: true,
+		cwd: process.cwd()
+	});
+	const handleAdd = async (path$1) => {
+		const file = (0, path.join)(process.cwd(), path$1);
+		const code = await (0, fs_promises.readFile)(file, "utf8");
+		if (code !== "") return;
+		const filename = (0, path.parse)(path$1).name;
+		if (filename.startsWith("_")) switch (filename) {
+			case "_layout":
+				console.log("👀 Layout file has been added");
+				await (0, fs_promises.writeFile)(path$1, await transformNewLayoutFile(path$1));
+				return;
+			default: return;
+		}
+		const componentName = (0, es_toolkit.kebabCase)(filename);
+		if (componentName !== filename) {
+			console.log(`❌ File name should be in kebab-case format. Would you like to rename ${filename} to ${componentName}?`);
+			return;
+		}
+		console.log(`👀 File ${path$1} has been added`);
+		await (0, fs_promises.writeFile)(path$1, await transformNewRouteFile(path$1));
+		await generateRouterFile();
+	};
+	watcher.on("add", handleAdd);
+	watcher.on("change", generateRouterFile);
+	watcher.on("unlink", generateRouterFile);
+	return () => {
+		watcher.off("add", handleAdd);
+		watcher.off("change", generateRouterFile);
+		watcher.off("unlink", generateRouterFile);
+		watcher.close();
+	};
+}
+
+//#endregion
+//#region src/routerPlugin.ts
+const DEFAULT_OPTIONS = { watch: true };
+const router = (options = DEFAULT_OPTIONS) => {
+	return {
+		name: "router-plugin",
+		build: {
+			order: "pre",
+			handler: () => {
+				generateRouterFile();
+			}
+		},
+		dev: {
+			order: "pre",
+			handler: () => {
+				generateRouterFile();
+				if (options.watch) watchRouter();
+			}
+		}
+	};
+};
+
+//#endregion
+exports.router = router;

package/dist/index.d.cts

@@ -0,0 +1,10 @@
+import { GranitePluginCore } from "@granite-js/plugin-core";
+
+//#region src/routerPlugin.d.ts
+interface RouterPluginOptions {
+  watch?: boolean;
+}
+declare const router: (options?: RouterPluginOptions) => GranitePluginCore;
+
+//#endregion
+export { router };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { GranitePluginCore } from "@granite-js/plugin-core";
+
+//#region src/routerPlugin.d.ts
+interface RouterPluginOptions {
+  watch?: boolean;
+}
+declare const router: (options?: RouterPluginOptions) => GranitePluginCore;
+
+//#endregion
+export { router };

package/dist/index.js

@@ -0,0 +1,255 @@
+import { existsSync, readFileSync, readdirSync, writeFileSync } from "fs";
+import { join, parse } from "path";
+import { parseFileSync } from "@swc/core";
+import { kebabCase, pascalCase } from "es-toolkit";
+import { readFile, writeFile } from "fs/promises";
+import chokidar from "chokidar";
+
+//#region src/checkExportRoute.ts
+/**
+* Checks if Route is exported from the file.
+*/
+function checkExportRoute(path) {
+	try {
+		const ast = parseFileSync(path, {
+			syntax: "typescript",
+			tsx: true
+		});
+		const hasExportSpecifiers = ast.body.some((node) => {
+			if (node.type !== "ExportNamedDeclaration") return false;
+			return node.specifiers?.some((specifier) => {
+				if (specifier.type !== "ExportSpecifier") return false;
+				return specifier.orig?.value === "Route";
+			});
+		});
+		if (hasExportSpecifiers) return true;
+		const hasExportNamedVariable = ast.body.some((node) => {
+			if (node.type !== "ExportDeclaration") return false;
+			if (node.declaration.type !== "VariableDeclaration") return false;
+			return node.declaration.declarations.some((declaration) => declaration.id.type === "Identifier" && declaration.id.value === "Route");
+		});
+		return hasExportNamedVariable;
+	} catch {
+		return false;
+	}
+}
+
+//#endregion
+//#region src/getComponentName.ts
+function getComponentName(filePath) {
+	const path = filePath.replace(/^pages\//, "").replace(/\.(tsx|ts)$/, "");
+	const segments = path.split("/").filter(Boolean);
+	if (segments[segments.length - 1] === "index") segments.pop();
+	const componentName = segments.map((segment) => pascalCase(segment)).join("");
+	return componentName || "Index";
+}
+
+//#endregion
+//#region src/getPath.ts
+function getPath(filePath) {
+	let path = filePath.replace(/^pages\//, "").replace(/\.[^/.]+$/, "");
+	if (path.endsWith("/index")) path = path.replace(/\/index$/, "");
+	else if (path === "index") path = "";
+	return `/${path}`;
+}
+
+//#endregion
+//#region src/template.ts
+const NEW_ROUTE_FILE_TEMPLATE = `import React from 'react';
+import { Text, View } from 'react-native';
+import { createRoute } from '@granite-js/react-native';
+
+export const Route = createRoute('%%path%%', {
+  validateParams: (params) => params,
+  component: %%componentName%%,
+});
+
+function %%componentName%%() {
+  return (
+    <View>
+      <Text>Hello %%componentName%%</Text>
+    </View>
+  );
+}
+`;
+const ROUTER_GEN_TEMPLATE = `/* eslint-disable */
+// This file is auto-generated by @granite-js/react-native. DO NOT EDIT.
+%%pageImports%%
+
+declare module '@granite-js/react-native' {
+  interface RegisterScreen {
+%%pageRoutes%%
+  }
+}
+`;
+const NEW_LAYOUT_FILE_TEMPLATE = `import React, { PropsWithChildren } from 'react';
+
+export default function %%componentName%%Layout({ children }: PropsWithChildren) {
+  return (
+    <>
+      {children}
+    </>
+  );
+}
+`;
+
+//#endregion
+//#region src/utils/transformTemplate.ts
+/**
+* 템플릿 문자열에서 %%key%% 형식의 플레이스홀더를 values 객체의 값으로 대체합니다.
+* 제네릭 타입 T를 통해 템플릿 문자열의 플레이스홀더 키를 자동으로 추론하여 타입 안정성을 보장합니다.
+*
+* @example
+* const str = "안녕하세요 %%name%%님, 당신의 나이는 %%age%%살 입니다."
+* const result = transformTemplate(str, { name: "홍길동", age: "20" })
+* // 결과: "안녕하세요 홍길동님, 당신의 나이는 20살 입니다."
+*/
+function transformTemplate(templateString, values) {
+	let result = templateString;
+	for (const key in values) {
+		const placeholder = `%%${key}%%`;
+		result = result.replace(new RegExp(placeholder, "g"), values[key]);
+	}
+	return result;
+}
+
+//#endregion
+//#region src/generateRouterFile.ts
+function generateRouterFile() {
+	const cwd = process.cwd();
+	function getPageFiles(dir, prefix = "") {
+		const files = readdirSync(join(cwd, dir), { withFileTypes: true });
+		return files.reduce((acc, file) => {
+			if (file.isDirectory()) return [...acc, ...getPageFiles(`${dir}/${file.name}`, `${prefix}${file.name}/`)];
+			if (file.name.endsWith(".tsx") || file.name.endsWith(".ts")) {
+				const name = parse(file.name).name;
+				const ext = parse(file.name).ext;
+				return [...acc, `${prefix}${name}${ext}`];
+			}
+			return acc;
+		}, []);
+	}
+	const allPages = getPageFiles("pages");
+	const exportRouteMap = new Map(allPages.map((page) => [page, checkExportRoute(join(cwd, "pages", page))]));
+	const pageFiles = allPages.filter((page) => !page.startsWith("_") && exportRouteMap.get(page));
+	const pageImports = pageFiles.map((page) => {
+		const componentName = getComponentName(page);
+		const pagePath = getPath(page);
+		return transformTemplate("import { Route as _%%componentName%%Route } from '../pages%%pagePath%%';", {
+			componentName,
+			pagePath
+		});
+	}).join("\n");
+	const pageRoutes = pageFiles.map((page) => {
+		const componentName = getComponentName(page);
+		const pagePath = getPath(page);
+		return transformTemplate("    '%%pagePath%%': ReturnType<typeof _%%componentName%%Route.useParams>;", {
+			componentName,
+			pagePath
+		});
+	}).join("\n");
+	const generatedContent = transformTemplate(ROUTER_GEN_TEMPLATE, {
+		pageImports,
+		pageRoutes
+	});
+	const routerFilePath = join(cwd, "src", "router.gen.ts");
+	if (existsSync(routerFilePath)) {
+		const existingContent = readFileSync(routerFilePath, "utf-8");
+		if (existingContent === generatedContent) return;
+	}
+	writeFileSync(routerFilePath, generatedContent);
+	console.log("✅ Router file generated successfully!");
+}
+
+//#endregion
+//#region src/getPageName.ts
+function getPageName(filePath) {
+	const parts = filePath.split("/");
+	const indexOfPages = parts.indexOf("pages");
+	if (indexOfPages === -1) return "";
+	const relevantParts = parts.slice(indexOfPages + 1);
+	if (relevantParts.at(-1)?.startsWith("_")) relevantParts.pop();
+	const lastPart = relevantParts.at(-1);
+	if (!lastPart) return "";
+	return pascalCase(lastPart);
+}
+
+//#endregion
+//#region src/transformNewRouteFile.ts
+async function transformNewRouteFile(path) {
+	return transformTemplate(NEW_ROUTE_FILE_TEMPLATE, {
+		path: getPath(path),
+		componentName: getComponentName(path)
+	});
+}
+async function transformNewLayoutFile(path) {
+	return transformTemplate(NEW_LAYOUT_FILE_TEMPLATE, { componentName: getPageName(path) });
+}
+
+//#endregion
+//#region src/watchRouter.ts
+function watchRouter() {
+	const watcher = chokidar.watch("./pages", {
+		ignored: (path, stats) => {
+			return Boolean(stats?.isFile() && !path.endsWith(".ts") && !path.endsWith(".tsx"));
+		},
+		ignoreInitial: true,
+		persistent: true,
+		cwd: process.cwd()
+	});
+	const handleAdd = async (path) => {
+		const file = join(process.cwd(), path);
+		const code = await readFile(file, "utf8");
+		if (code !== "") return;
+		const filename = parse(path).name;
+		if (filename.startsWith("_")) switch (filename) {
+			case "_layout":
+				console.log("👀 Layout file has been added");
+				await writeFile(path, await transformNewLayoutFile(path));
+				return;
+			default: return;
+		}
+		const componentName = kebabCase(filename);
+		if (componentName !== filename) {
+			console.log(`❌ File name should be in kebab-case format. Would you like to rename ${filename} to ${componentName}?`);
+			return;
+		}
+		console.log(`👀 File ${path} has been added`);
+		await writeFile(path, await transformNewRouteFile(path));
+		await generateRouterFile();
+	};
+	watcher.on("add", handleAdd);
+	watcher.on("change", generateRouterFile);
+	watcher.on("unlink", generateRouterFile);
+	return () => {
+		watcher.off("add", handleAdd);
+		watcher.off("change", generateRouterFile);
+		watcher.off("unlink", generateRouterFile);
+		watcher.close();
+	};
+}
+
+//#endregion
+//#region src/routerPlugin.ts
+const DEFAULT_OPTIONS = { watch: true };
+const router = (options = DEFAULT_OPTIONS) => {
+	return {
+		name: "router-plugin",
+		build: {
+			order: "pre",
+			handler: () => {
+				generateRouterFile();
+			}
+		},
+		dev: {
+			order: "pre",
+			handler: () => {
+				generateRouterFile();
+				if (options.watch) watchRouter();
+			}
+		}
+	};
+};
+
+//#endregion
+export { router };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@granite-js/plugin-router",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "A Route Generator for Granite project",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "scripts": {
+    "prepack": "yarn build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest --no-watch",
+    "build": "tsdown"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "tsdown": "^0.11.12",
+    "typescript": "5.8.3",
+    "vitest": "^2.1.8"
+  },
+  "dependencies": {
+    "@granite-js/plugin-core": "0.0.1",
+    "@swc/core": "1.5.24",
+    "chokidar": "4.0.1",
+    "es-toolkit": "^1.26.1"
+  },
+  "sideEffects": false
+}