@next-core/yo 1.1.0

package/bin/yo.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import "../src/index.js";

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@next-core/yo",
+  "version": "1.1.0",
+  "description": "Generator for next v3",
+  "homepage": "https://github.com/easyops-cn/next-core/tree/v3/packages/yo",
+  "license": "GPL-3.0",
+  "type": "module",
+  "bin": {
+    "yo": "./bin/yo.js"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:easyops-cn/next-core.git"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "dependencies": {
+    "minimist": "^1.2.8",
+    "plop": "^3.1.2"
+  },
+  "devDependencies": {
+    "@next-core/build-next-bricks": "^1.7.2",
+    "@next-core/element": "^1.0.6",
+    "@next-core/i18n": "^1.0.19",
+    "@next-core/react-element": "^1.0.7",
+    "@next-core/test-next": "^1.0.6",
+    "@next-core/theme": "^1.1.1",
+    "react": "0.0.0-experimental-ee8509801-20230117"
+  },
+  "gitHead": "42ca2e08c31d805ee00f8fd010dfb1dc52bfa50b"
+}

package/src/index.js

@@ -0,0 +1,30 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import minimist from "minimist";
+import { Plop, run } from "plop";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const args = process.argv.slice(2);
+const argv = minimist(args);
+
+Plop.prepare(
+  {
+    cwd: argv.cwd,
+    configPath: path.join(__dirname, "plopfile.js"),
+    preload: argv.preload || [],
+    completion: argv.completion,
+  },
+  (env) =>
+    Plop.execute(env, (options) =>
+      run(
+        {
+          ...options,
+          // this will make the destination path to be based on the cwd when calling the wrapper
+          dest: process.cwd(),
+        },
+        undefined,
+        true
+      )
+    )
+);

package/src/plopfile.js

@@ -0,0 +1,225 @@
+import path from "node:path";
+import { existsSync } from "node:fs";
+import { readFile, readdir } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const validPkgName = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+const validBrickName = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
+
+const rootDir = process.cwd();
+const bricksDir = path.join(rootDir, "bricks");
+
+const packageJson = JSON.parse(
+  await readFile(path.join(rootDir, "package.json"))
+);
+const yoPackageJson = JSON.parse(
+  await readFile(path.join(__dirname, "../package.json"))
+);
+
+export default function (
+  /** @type {import('plop').NodePlopAPI} */
+  plop
+) {
+  const isOnGitHub = packageJson.homepage.includes("github.com");
+  const dependencies = {};
+  const devDependencies = {};
+  for (const [dep, version] of Object.entries(yoPackageJson.devDependencies)) {
+    switch (dep) {
+      case "@next-core/build-next-bricks":
+      case "@next-core/test-next":
+        devDependencies[dep] = version;
+        break;
+      default:
+        dependencies[dep] = version;
+    }
+  }
+
+  plop.setPartial("scope", isOnGitHub ? "@next-bricks" : "@bricks");
+  plop.setPartial("homepage", packageJson.homepage.replace(/\/$/, ""));
+  plop.setPartial(
+    "repository",
+    getObjectPartialInPackageJson(packageJson.repository)
+  );
+  plop.setPartial(
+    "license",
+    packageJson.license ?? (isOnGitHub ? "GPL-3.0" : "UNLICENSED")
+  );
+  plop.setPartial("dependencies", getObjectPartialInPackageJson(dependencies));
+  plop.setPartial(
+    "devDependencies",
+    getObjectPartialInPackageJson(devDependencies)
+  );
+
+  // create your generators here
+  plop.setGenerator("basics", {
+    description: "application controller logic",
+    prompts: [
+      {
+        type: "list",
+        name: "type",
+        message: "What do you want to do?",
+        choices: [
+          {
+            name: "Add a new brick",
+            value: "brick",
+          },
+          {
+            name: "Add a new provider",
+            value: "provider",
+          },
+          {
+            name: "Create a new brick package",
+            value: "bricks",
+          },
+        ],
+      },
+      {
+        type: "input",
+        name: "pkgName",
+        message: "Your package name:",
+        when(data) {
+          return data.type === "bricks";
+        },
+        validate(value) {
+          if (!validPkgName.test(value)) {
+            return "Please enter a lower-kebab-case package name.";
+          }
+
+          if (value.startsWith("providers-of-")) {
+            return "`providers-of-*` is reserved, please enter another name.";
+          }
+
+          if (existsSync(path.join(bricksDir, value))) {
+            return `Package "${value}" exists, please enter another name.`;
+          }
+
+          return true;
+        },
+      },
+      {
+        type: "list",
+        name: "pkgName",
+        message: "Select your package first:",
+        when(data) {
+          return data.type === "brick" || data.type === "provider";
+        },
+        choices: async () => {
+          const dirs = await readdir(bricksDir, { withFileTypes: true });
+          return dirs
+            .filter(
+              (dir) =>
+                dir.isDirectory() &&
+                existsSync(path.join(bricksDir, dir.name, "package.json"))
+            )
+            .map((dir) => dir.name)
+            .sort();
+        },
+      },
+      {
+        type: "input",
+        name: "brickName",
+        message: "Your brick name:",
+        when(data) {
+          return data.type === "brick";
+        },
+        validate(value, data) {
+          if (!validBrickName.test(value)) {
+            return "Please enter a lower-kebab-case brick name.";
+          }
+
+          if (existsSync(path.join(bricksDir, data.pkgName, "src", value))) {
+            return `Brick "${value}" seems to be existed, please enter another name.`;
+          }
+
+          return true;
+        },
+      },
+      {
+        type: "input",
+        name: "providerName",
+        message: "Your provider name:",
+        when(data) {
+          return data.type === "provider";
+        },
+        validate(value, data) {
+          if (!validBrickName.test(value)) {
+            return "Please enter a lower-kebab-case provider name.";
+          }
+
+          if (
+            existsSync(
+              path.join(
+                bricksDir,
+                data.pkgName,
+                "src/data-providers",
+                `${value}.ts`
+              )
+            )
+          ) {
+            return `Provider "${value}" seems to be existed, please enter another name.`;
+          }
+
+          return true;
+        },
+      },
+    ],
+    actions(data) {
+      if (data.type === "brick") {
+        return [
+          {
+            type: "addMany",
+            destination: "bricks/{{pkgName}}/src/{{brickName}}",
+            base: "templates/brick",
+            templateFiles: "templates/brick",
+          },
+          {
+            type: "append",
+            path: "bricks/{{pkgName}}/src/bootstrap.ts",
+            template: 'import "./{{brickName}}/index.js";\n',
+            separator: "",
+          },
+          {
+            type: "add",
+            path: "bricks/{{pkgName}}/docs/{{brickName}}.md",
+            templateFile: "templates/brick.md.hbs",
+          },
+        ];
+      } else if (data.type === "provider") {
+        return [
+          {
+            type: "add",
+            path: "bricks/{{pkgName}}/src/data-providers/{{providerName}}.ts",
+            templateFile: "templates/provider/provider.ts.hbs",
+          },
+          {
+            type: "add",
+            path: "bricks/{{pkgName}}/src/data-providers/{{providerName}}.spec.ts",
+            templateFile: "templates/provider/provider.spec.ts.hbs",
+          },
+          {
+            type: "append",
+            path: "bricks/{{pkgName}}/src/bootstrap.ts",
+            template: 'import "./data-providers/{{providerName}}.js";\n',
+            separator: "",
+          },
+        ];
+      } else if (data.type === "bricks") {
+        return [
+          {
+            type: "addMany",
+            destination: "bricks/{{pkgName}}",
+            base: "templates/bricks",
+            templateFiles: "templates/bricks",
+          },
+        ];
+      }
+      return [];
+    },
+  });
+}
+
+function getObjectPartialInPackageJson(object) {
+  return JSON.stringify(object, null, 4).replace(/\}\s*$/, "  }");
+}

package/src/templates/brick/i18n.ts

@@ -0,0 +1,16 @@
+export enum K {}
+// HELLO = "HELLO",
+
+const en: Locale = {
+  // HELLO: "Hello",
+};
+
+const zh: Locale = {
+  // HELLO: "你好",
+};
+
+export const NS = "bricks/{{pkgName}}/{{brickName}}";
+
+export const locales = { en, zh };
+
+type Locale = { [key in K]: string };

package/src/templates/brick/index.spec.tsx.hbs

@@ -0,0 +1,24 @@
+import { describe, test, expect, jest } from "@jest/globals";
+import { act } from "react-dom/test-utils";
+import "./";
+import { {{pascalCase brickName}} } from "./index.js";
+
+jest.mock("@next-core/theme", () => ({}));
+
+describe("{{pkgName}}.{{brickName}}", () => {
+  test("basic usage", async () => {
+    const element = document.createElement("{{pkgName}}.{{brickName}}") as {{pascalCase brickName}};
+
+    expect(element.shadowRoot).toBeFalsy();
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+    expect(element.shadowRoot?.childNodes.length).toBeGreaterThan(1);
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+    expect(element.shadowRoot?.childNodes.length).toBe(0);
+  });
+});

package/src/templates/brick/index.tsx.hbs

@@ -0,0 +1,33 @@
+import React from "react";
+import { createDecorators } from "@next-core/element";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+import styleText from "./styles.shadow.css";
+
+// --- NOTE: uncomment these lines below to enable i18n for your brick ---
+// import { useTranslation, initializeReactI18n } from "@next-core/i18n/react";
+// import { K, NS, locales } from "./i18n.js";
+// initializeReactI18n(NS, locales);
+
+const { defineElement, property } = createDecorators();
+
+/**
+ * 构件 {{brickName}}
+ */
+export
+@defineElement("{{pkgName}}.{{brickName}}", {
+  styleTexts: [styleText],
+})
+class {{pascalCase brickName}} extends ReactNextElement {
+  render() {
+    return (
+      <{{pascalCase brickName}}Component />
+    );
+  }
+}
+
+export function {{pascalCase brickName}}Component() {
+  // const { t } = useTranslation(NS);
+  // const hello = t(K.HELLO);
+  return <div>It works!</div>;
+}

package/src/templates/brick/styles.shadow.css

@@ -0,0 +1,7 @@
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/src/templates/brick.md.hbs

@@ -0,0 +1,9 @@
+构件 {{brickName}}
+
+## Examples
+
+### Basic
+
+```html preview
+<{{pkgName}}.{{brickName}}>Hello world</{{pkgName}}.{{brickName}}>
+```

package/src/templates/bricks/build.config.js

@@ -0,0 +1,3 @@
+// @ts-check
+/** @type {import("@next-core/build-next-bricks").BuildNextBricksConfig} */
+export default {};

package/src/templates/bricks/package.json.hbs

@@ -0,0 +1,35 @@
+{
+  "name": "{{> scope }}/{{pkgName}}",
+  "version": "0.0.0",
+  "homepage": "{{> homepage }}/tree/master/bricks/{{pkgName}}",
+  "repository": {{> repository }},
+  "license": "{{> license}}",
+  "type": "module",
+  "sideEffects": true,
+  "files": [
+    "dist",
+    "dist-types",
+    "docs"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/bricks.json": "./dist/bricks.json",
+    "./dist/manifest.json": "./dist/manifest.json",
+    "./*": {
+      "types": "./dist-types/*/index.d.ts"
+    }
+  },
+  "scripts": {
+    "start": "cross-env NODE_ENV=development build-next-bricks --watch",
+    "build": "npm run build:main && npm run build:types",
+    "build:main": "cross-env NODE_ENV=production build-next-bricks",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist-types --project tsconfig.json",
+    "build:manifest": "cross-env NODE_ENV=production build-next-bricks --manifest-only",
+    "test": "cross-env NODE_ENV='test' test-next",
+    "test:ci": "cross-env NODE_ENV='test' CI=true test-next",
+    "prepublishOnly": "cp package.json package.json.bak && npm pkg delete dependencies",
+    "postpublish": "mv package.json.bak package.json"
+  },
+  "dependencies": {{> dependencies }},
+  "devDependencies": {{> devDependencies }}
+}

package/src/templates/bricks/src/index.ts

@@ -0,0 +1 @@
+import("./bootstrap.js");

package/src/templates/bricks/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.module.json",
+  "include": ["./src", "../../declarations"]
+}

package/src/templates/provider/provider.spec.ts.hbs

@@ -0,0 +1,8 @@
+import { describe, test, expect } from "@jest/globals";
+import { {{camelCase providerName}} } from "./{{providerName}}.js";
+
+describe("{{camelCase providerName}}", () => {
+  test("should work", async () => {
+    expect(await {{camelCase providerName}}()).toBe(undefined);
+  });
+});

package/src/templates/provider/provider.ts.hbs

@@ -0,0 +1,10 @@
+import { createProviderClass } from "@next-core/utils/general";
+
+export async function {{camelCase providerName}}(): Promise<unknown> {
+  //
+}
+
+customElements.define(
+  "{{pkgName}}.{{providerName}}",
+  createProviderClass({{camelCase providerName}})
+);