@mantou/gem-port 1.0.0 → 1.2.1

package/README.md

@@ -0,0 +1,15 @@
+# Gem-port
+
+Generate React/Vue/Svelte components for Gem elements
+
+## Usage
+
+```bash
+gem-port src/elements
+
+# specify svelte element namespace
+gem-port src/elements --svelte-ns=pat
+
+# print help info
+gem-port -h
+```

package/bin/index.js

@@ -1849,28 +1849,29 @@ Expecting one of '${allowedValues.join("', '")}'`);
 });
 
 // src/index.ts
-var import_path4 = __toESM(require("path"));
+var import_node_path4 = __toESM(require("node:path"));
 var import_commander = __toESM(require_commander());
 
 // package.json
 var name = "@mantou/gem-port";
-var version = "1.0.0";
+var version = "1.2.1";
 var description = "Export React component";
 
 // src/common.ts
-var import_path = __toESM(require("path"));
-var import_fs = require("fs");
+var import_node_fs = require("node:fs");
+var import_node_path = __toESM(require("node:path"));
 
 // ../gem/lib/utils.js
+var { assign, fromEntries, entries, keys } = Object;
 function camelToKebabCase(str) {
-  return str.replace(/[A-Z]/g, ($1) => "-" + $1.toLowerCase());
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
 
 // ../gem-analyzer/lib/utils.js
 function getJsDoc(declaration) {
   if ("getJsDocs" in declaration) {
     const jsDocs = declaration.getJsDocs();
-    const deprecated = jsDocs.map((jsDoc) => jsDoc.getTags()).flat().some((e) => e.getTagName() === "deprecated");
+    const deprecated = jsDocs.flatMap((jsDoc) => jsDoc.getTags()).some((e) => e.getTagName() === "deprecated");
     const comment = jsDocs.map((jsDoc) => jsDoc.getCommentText()).join("\n\n");
     return {
       deprecated,
@@ -1890,6 +1891,10 @@ function isGetter(declaration, kind = "get") {
 function isSetter(declaration) {
   return isGetter(declaration, "set");
 }
+function isPrivateId(name2) {
+  if (name2.startsWith("#") || name2.startsWith("_"))
+    return true;
+}
 
 // ../gem-analyzer/index.js
 var shadowDecoratorName = ["shadow"];
@@ -1953,23 +1958,25 @@ var parseElement = async (declaration, file, project2) => {
   };
   const className = declaration.getName();
   const constructorExtendsName = declaration.getExtends()?.getText();
-  const constructor = declaration.getConstructors()[0];
-  const appendElementDesc = (desc = "") => detail.description = (detail.description ? detail.description + "\n\n" : "") + desc;
+  const cons = declaration.getConstructors()[0];
+  const appendElementDesc = (desc = "") => detail.description = (detail.description ? `${detail.description}
+
+` : "") + desc;
   declaration.getJsDocs().forEach((jsDoc) => appendElementDesc(jsDoc.getCommentText()));
   if (className && constructorExtendsName) {
     detail.extend = await getExtendsClassDetail(constructorExtendsName, file, project2);
     detail.constructorName = className;
     detail.constructorExtendsName = constructorExtendsName;
-    if (constructor) {
+    if (cons) {
       const params = {};
-      const jsDocs = constructor.getJsDocs();
+      const jsDocs = cons.getJsDocs();
       jsDocs.forEach((jsDoc) => {
         appendElementDesc(jsDoc.getDescription());
         jsDoc.getTags().map((tag) => ({ tagName: tag.getTagName(), name: tag.getName(), comment: tag.getCommentText() })).filter(({ tagName, comment, name: name2 }) => tagName === "param" && comment && name2).forEach(({ name: name2, comment }) => {
           params[name2] = comment;
         });
       });
-      detail.constructorParams = constructor.getParameters().map((param) => ({
+      detail.constructorParams = cons.getParameters().map((param) => ({
         name: param.getName(),
         type: getTypeText(param),
         description: params[param.getName()]
@@ -1979,7 +1986,7 @@ var parseElement = async (declaration, file, project2) => {
   const staticPropertiesDeclarations = declaration.getStaticProperties();
   for (const staticPropDeclaration of staticPropertiesDeclarations) {
     const staticPropName = staticPropDeclaration.getName();
-    if (staticPropName.startsWith("#"))
+    if (isPrivateId(staticPropName))
       continue;
     const prop = {
       name: staticPropName,
@@ -2009,7 +2016,7 @@ var parseElement = async (declaration, file, project2) => {
   const staticMethodDeclarations = declaration.getStaticMethods();
   for (const staticMethodDeclaration of staticMethodDeclarations) {
     const staticMethodName = staticMethodDeclaration.getName();
-    if (staticMethodName.startsWith("#"))
+    if (isPrivateId(staticMethodName))
       continue;
     const method = {
       name: staticMethodName,
@@ -2021,7 +2028,7 @@ var parseElement = async (declaration, file, project2) => {
   const propDeclarations = declaration.getInstanceProperties();
   for (const propDeclaration of propDeclarations) {
     const propName = propDeclaration.getName();
-    if (propName.startsWith("#"))
+    if (isPrivateId(propName))
       continue;
     if (lifecyclePopsOrMethods.includes(propName))
       continue;
@@ -2066,7 +2073,7 @@ var parseElement = async (declaration, file, project2) => {
   const methodDeclarations = declaration.getInstanceMethods();
   for (const methodDeclaration of methodDeclarations) {
     const methodName = methodDeclaration.getName();
-    if (methodName.startsWith("#"))
+    if (isPrivateId(methodName))
       continue;
     if (lifecyclePopsOrMethods.includes(methodName))
       continue;
@@ -2100,7 +2107,7 @@ var getElements = async (file, project2) => {
   for (const declaration of file.getClasses()) {
     const elementDecorators = declaration.getDecorators();
     const elementDeclaration = elementDecorators.find((decorator) => elementDecoratorName.includes(decorator.getName()));
-    const elementTag = elementDeclaration?.getCallExpression().getArguments()[0].getText().replace(/('|"|`)?(\S*)\1/, "$2") || declaration.getJsDocs().map((jsDoc) => jsDoc.getTags()).flat().find((e) => e.getTagName() === "customElement")?.getCommentText();
+    const elementTag = elementDeclaration?.getCallExpression().getArguments()[0].getText().replace(/('|"|`)?(\S*)\1/, "$2") || declaration.getJsDocs().flatMap((jsDoc) => jsDoc.getTags()).find((e) => e.getTagName() === "customElement")?.getCommentText();
     if (elementTag) {
       const detail = {
         ...await parseElement(declaration, file, project2),
@@ -2120,8 +2127,8 @@ var ts = __toESM(require("typescript"));
 var dev = process.env.MODE === "dev";
 var elements = process.env.ELEMENTS?.split(",");
 function getElementPathList(elementsDir) {
-  const paths = (0, import_fs.readdirSync)(elementsDir).map((filename) => import_path.default.resolve(elementsDir, filename)).filter((elementFilePath, index) => {
-    if (!(0, import_fs.statSync)(elementFilePath).isFile()) return false;
+  const paths = (0, import_node_fs.readdirSync)(elementsDir).map((filename) => import_node_path.default.resolve(elementsDir, filename)).filter((elementFilePath, index) => {
+    if (!(0, import_node_fs.statSync)(elementFilePath).isFile()) return false;
     if (elements) {
       return elements?.some((ele) => elementFilePath.includes(ele));
     } else if (dev) {
@@ -2143,13 +2150,13 @@ var getChain = (detail) => {
   }
   return result;
 };
-var mergeElementDetail = (elementFilePath, detail) => {
+var mergeElementDetail = (detail) => {
   const chain = getChain(detail);
   return {
     ...detail,
-    properties: chain.map((e) => e.properties).flat(),
-    methods: chain.map((e) => e.methods).flat(),
-    events: chain.map((e) => e.events).flat()
+    properties: chain.flatMap((e) => e.properties),
+    methods: chain.flatMap((e) => e.methods),
+    events: chain.flatMap((e) => e.events)
   };
 };
 var elementCache = {};
@@ -2157,13 +2164,13 @@ var project = new import_ts_morph.Project({
   useInMemoryFileSystem: true,
   compilerOptions: { target: import_ts_morph.ts.ScriptTarget.ESNext }
 });
-project.getFileSystem().readFile = (filePath) => import_fs.promises.readFile(filePath, "utf8");
+project.getFileSystem().readFile = (filePath) => import_node_fs.promises.readFile(filePath, "utf8");
 async function getFileElements(elementFilePath) {
   if (!elementCache[elementFilePath]) {
-    const text = (0, import_fs.readFileSync)(elementFilePath, { encoding: "utf-8" });
+    const text = (0, import_node_fs.readFileSync)(elementFilePath, { encoding: "utf-8" });
     const file = project.getSourceFile(elementFilePath) || project.createSourceFile(elementFilePath, text);
     const details = await getElements(file, project);
-    elementCache[elementFilePath] = details.map((detail) => mergeElementDetail(elementFilePath, detail));
+    elementCache[elementFilePath] = details.map((detail) => mergeElementDetail(detail));
   }
   return elementCache[elementFilePath];
 }
@@ -2174,8 +2181,8 @@ function getJsDocDescName(name2, deprecated) {
   return `${deprecated ? "/**@deprecated */\n" : ""}${name2}`;
 }
 function getRelativePath(elementFilePath, outDir) {
-  const basename = import_path.default.basename(elementFilePath, import_path.default.extname(elementFilePath));
-  const relativePath = import_path.default.relative(import_path.default.resolve(outDir), import_path.default.dirname(elementFilePath)).replace("src/", "");
+  const basename = import_node_path.default.basename(elementFilePath, import_node_path.default.extname(elementFilePath));
+  const relativePath = import_node_path.default.relative(import_node_path.default.resolve(outDir), import_node_path.default.dirname(elementFilePath)).replace("src/", "");
   return `${relativePath}/${basename}`;
 }
 function compile(outDir, fileSystem) {
@@ -2215,7 +2222,7 @@ async function createReactSourceFile(elementFilePath, outDir) {
       const getters = properties.filter((e) => e.getter);
       const settableProperties = properties.filter((e) => !e.getter && !e.event);
       return [
-        componentName + ".tsx",
+        `${componentName}.tsx`,
         `
           import React, { HTMLAttributes, RefAttributes } from 'react';
           import React, { ForwardRefExoticComponent, forwardRef, useImperativeHandle, useRef, useLayoutEffect } from 'react';
@@ -2292,11 +2299,56 @@ async function compileReact(elementsDir, outDir) {
   compile(outDir, fileSystem);
 }
 
+// src/svelte.ts
+var import_node_path2 = __toESM(require("node:path"));
+async function compileSvelte(elementsDir, outDir, ns = "") {
+  const fileSystem = {};
+  const processFile = async (elementFilePath) => {
+    const elementDetailList = await getFileElements(elementFilePath);
+    Object.assign(
+      fileSystem,
+      Object.fromEntries(
+        elementDetailList.map(({ name: tag, constructorName, properties }) => {
+          const componentName = getComponentName(tag);
+          const componentPropsName = `${componentName}Props`;
+          const relativePath = getRelativePath(elementFilePath, outDir);
+          const basename = import_node_path2.default.basename(relativePath);
+          return [
+            `${[ns, basename].filter((e) => !!e).join("-")}.ts`,
+            `
+            import type { HTMLAttributes } from "svelte/elements";
+            import { ${constructorName} } from '${relativePath}';
+            export * from '${relativePath}';
+
+            interface ${componentPropsName} extends HTMLAttributes<HTMLElement> {
+              ${properties.map(
+              ({ name: name2, getter, event, deprecated }) => event ? [
+                getJsDocDescName(`'on:${event}'`, deprecated),
+                `(event: CustomEvent<Parameters<${constructorName}['${name2}']>[0]>) => void`
+              ].join("?:") : !getter ? [getJsDocDescName(name2, deprecated), `${constructorName}['${name2}']`].join("?:") : ""
+            ).join(";\n")}
+            };
+
+            declare module "svelte/elements" {
+              interface SvelteHTMLElements {
+                '${tag}': ${componentPropsName};
+              }
+            }
+          `
+          ];
+        })
+      )
+    );
+  };
+  await Promise.all(getElementPathList(elementsDir).map(processFile));
+  compile(outDir, fileSystem);
+}
+
 // src/vue.ts
-var import_fs2 = require("fs");
-var import_path2 = require("path");
+var import_node_fs2 = require("node:fs");
+var import_node_path3 = require("node:path");
 async function generateVue(elementsDir, outDir) {
-  (0, import_fs2.mkdirSync)(outDir, { recursive: true });
+  (0, import_node_fs2.mkdirSync)(outDir, { recursive: true });
   const processFile = async (elementFilePath) => {
     const elements2 = await getFileElements(elementFilePath);
     elements2.forEach(({ name: tag, properties, constructorName, methods, events }) => {
@@ -2305,8 +2357,8 @@ async function generateVue(elementsDir, outDir) {
       const relativePath = getRelativePath(elementFilePath, outDir);
       const settableProperties = properties.filter((e) => !e.getter && !e.event);
       const getters = properties.filter((e) => e.getter);
-      (0, import_fs2.writeFileSync)(
-        (0, import_path2.resolve)(outDir, componentName + ".vue"),
+      (0, import_node_fs2.writeFileSync)(
+        (0, import_node_path3.resolve)(outDir, `${componentName}.vue`),
         `
         <script setup lang="ts">
         import { ref, defineProps, defineEmits, defineExpose, onMounted } from 'vue'
@@ -2376,51 +2428,6 @@ async function generateVue(elementsDir, outDir) {
   await Promise.all(getElementPathList(elementsDir).map(processFile));
 }
 
-// src/svelte.ts
-var import_path3 = __toESM(require("path"));
-async function compileSvelte(elementsDir, outDir, ns = "") {
-  const fileSystem = {};
-  const processFile = async (elementFilePath) => {
-    const elementDetailList = await getFileElements(elementFilePath);
-    Object.assign(
-      fileSystem,
-      Object.fromEntries(
-        elementDetailList.map(({ name: tag, constructorName, properties }) => {
-          const componentName = getComponentName(tag);
-          const componentPropsName = `${componentName}Props`;
-          const relativePath = getRelativePath(elementFilePath, outDir);
-          const basename = import_path3.default.basename(relativePath);
-          return [
-            [ns, basename].filter((e) => !!e).join("-") + ".ts",
-            `
-            import type { HTMLAttributes } from "svelte/elements";
-            import { ${constructorName} } from '${relativePath}';
-            export * from '${relativePath}';
-
-            interface ${componentPropsName} extends HTMLAttributes<HTMLElement> {
-              ${properties.map(
-              ({ name: name2, getter, event, deprecated }) => event ? [
-                getJsDocDescName(`'on:${event}'`, deprecated),
-                `(event: CustomEvent<Parameters<${constructorName}['${name2}']>[0]>) => void`
-              ].join("?:") : !getter ? [getJsDocDescName(name2, deprecated), `${constructorName}['${name2}']`].join("?:") : ""
-            ).join(";\n")}
-            };
-
-            declare module "svelte/elements" {
-              interface SvelteHTMLElements {
-                '${tag}': ${componentPropsName};
-              }
-            }
-          `
-          ];
-        })
-      )
-    );
-  };
-  await Promise.all(getElementPathList(elementsDir).map(processFile));
-  compile(outDir, fileSystem);
-}
-
 // src/index.ts
 var cliOptions = {
   outDir: "./",
@@ -2429,9 +2436,9 @@ var cliOptions = {
 var timer = setTimeout(() => import_commander.default.outputHelp());
 import_commander.default.name(name).description(description).version(version, "-v, --version").option("-o, --outdir <path>", `specify out dir`, (outdir) => cliOptions.outDir = outdir).option("--svelte-ns <ns>", `specify svelte element namespace`, (ns) => cliOptions.svelteNs = ns).arguments("<dir>").action(async (dir) => {
   clearTimeout(timer);
-  await compileReact(dir, import_path4.default.resolve(cliOptions.outDir, "react"));
-  await generateVue(dir, import_path4.default.resolve(cliOptions.outDir, "vue"));
-  await compileSvelte(dir, import_path4.default.resolve(cliOptions.outDir, "svelte"), cliOptions.svelteNs);
+  await compileReact(dir, import_node_path4.default.resolve(cliOptions.outDir, "react"));
+  await generateVue(dir, import_node_path4.default.resolve(cliOptions.outDir, "vue"));
+  await compileSvelte(dir, import_node_path4.default.resolve(cliOptions.outDir, "svelte"), cliOptions.svelteNs);
   process.exit(0);
 });
 import_commander.default.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantou/gem-port",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "description": "Export React component",
   "keywords": [
     "gem",
@@ -19,12 +19,14 @@
     "prepublishOnly": "pnpm build"
   },
   "dependencies": {
-    "@gemjs/config": "^2.0.0",
     "commander": "^7.2.0",
-    "gem-analyzer": "^2.0.0",
+    "gem-analyzer": "^2.2.1",
     "ts-morph": "^13.0.0",
     "typescript": "^5.6.2"
   },
+  "devDependencies": {
+    "@gemjs/config": "^2.1.1"
+  },
   "author": "mantou132",
   "license": "MIT",
   "repository": {
@@ -35,6 +37,5 @@
   "bugs": {
     "url": "https://github.com/mantou132/gem/issues"
   },
-  "homepage": "https://github.com/mantou132/gem#readme",
-  "gitHead": "499af6e71e3c161bd74f87202e770ebefbc95b33"
+  "homepage": "https://github.com/mantou132/gem#readme"
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021-present
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.