create-extro 0.0.0 → 0.1.0

package/dist/cli.js

@@ -21,6 +21,8 @@ const unwrap = (value) => {
         bail();
     return value;
 };
+/** A clack spinner with its frames in the brand terracotta, not clack's magenta. */
+const spinner = () => p.spinner({ styleFrame: brand });
 /** First validation error/warning for a package name, or undefined if valid. */
 const packageNameError = (name) => {
     const { validForNewPackages, errors, warnings } = validatePackageName(name);
@@ -140,7 +142,7 @@ export const run = async () => {
         doGit = false;
     }
     // 6. Write the template.
-    const scaffolding = p.spinner();
+    const scaffolding = spinner();
     scaffolding.start(`Scaffolding the ${brand(template)} template`);
     try {
         scaffold({ templateName: template, targetDir, packageName });
@@ -152,9 +154,9 @@ export const run = async () => {
     scaffolding.stop(`Created ${bold(rel)}`);
     // 7. Install.
     if (doInstall) {
-        const installing = p.spinner();
+        const installing = spinner();
         installing.start(`Installing dependencies with ${brand(pm)}`);
-        if (installDependencies(pm, targetDir)) {
+        if (await installDependencies(pm, targetDir)) {
             installing.stop("Installed dependencies");
         }
         else {
@@ -165,7 +167,7 @@ export const run = async () => {
     }
     // 8. Git.
     if (doGit) {
-        const initializing = p.spinner();
+        const initializing = spinner();
         initializing.start("Initializing a git repository");
         initializing.stop(initGitRepo(targetDir)
             ? "Initialized a git repository"

package/dist/fs.js

@@ -29,5 +29,15 @@ export const toValidPackageName = (input) => input
     .replace(/^[._]+/, "")
     .replace(/[^a-z0-9-~]+/g, "-")
     .replace(/^-+|-+$/g, "") || "extro-extension";
+/**
+ * @describe Humanize a package name into the Chrome-visible extension name
+ * stamped into the scaffolded extro.config.ts: "cool-tabs" becomes
+ * "Cool Tabs". Mirrors the displayName Plasmo derives for its manifests.
+ */
+export const toDisplayName = (packageName) => packageName
+    .split(/[-_.~\s]+/)
+    .filter(Boolean)
+    .map((word) => word[0].toUpperCase() + word.slice(1))
+    .join(" ") || "My Extension";
 /** Display form of the target: the cwd-relative path, or "." for the cwd itself. */
 export const relativeTarget = (cwd, targetDir) => path.relative(cwd, targetDir) || ".";

package/dist/scaffold.js

@@ -1,7 +1,12 @@
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { toDisplayName } from "./fs.js";
 const TEMPLATES_ROOT = fileURLToPath(new URL("../templates", import.meta.url));
+// The config.name every template ships. Stamped with the humanized project
+// name on copy; config.name wins over package.json in manifest generation,
+// so this is the name Chrome shows.
+const NAME_PLACEHOLDER = `name: "My Extension"`;
 // Dotfiles ship under `_`-prefixed names so npm does not rewrite them at
 // publish time (it renames a packaged `.gitignore` to `.npmignore`) and so
 // they survive `npm pack`. They are restored to their real names on copy.
@@ -29,11 +34,18 @@ const copyDir = (srcDir, destDir, packageName) => {
         else if (entry.name === "package.json") {
             writePackageJson(srcPath, destPath, packageName);
         }
+        else if (entry.name === "extro.config.ts") {
+            writeExtroConfig(srcPath, destPath, packageName);
+        }
         else {
             fs.copyFileSync(srcPath, destPath);
         }
     }
 };
+const writeExtroConfig = (srcPath, destPath, packageName) => {
+    const source = fs.readFileSync(srcPath, "utf8");
+    fs.writeFileSync(destPath, source.replace(NAME_PLACEHOLDER, `name: "${toDisplayName(packageName)}"`));
+};
 const writePackageJson = (srcPath, destPath, packageName) => {
     const manifest = JSON.parse(fs.readFileSync(srcPath, "utf8"));
     manifest.name = packageName;

package/dist/system.js

@@ -1,10 +1,15 @@
 import spawn from "cross-spawn";
 import { installArgs } from "./pkg-manager.js";
-/** Install dependencies in `cwd` with the given manager. Returns success. */
-export const installDependencies = (pm, cwd) => {
-    const result = spawn.sync(pm, installArgs(pm), { cwd, stdio: "ignore" });
-    return result.status === 0;
-};
+/**
+ * @describe Install dependencies in `cwd` with the given manager. Resolves
+ * with success. Async on purpose: a `spawn.sync` child blocks the event loop
+ * for the whole install, which freezes the clack spinner shown around it.
+ */
+export const installDependencies = (pm, cwd) => new Promise((resolve) => {
+    const child = spawn(pm, installArgs(pm), { cwd, stdio: "ignore" });
+    child.on("error", () => resolve(false));
+    child.on("close", (code) => resolve(code === 0));
+});
 /** Whether a `git` binary is on PATH. */
 export const isGitInstalled = () => spawn.sync("git", ["--version"], { stdio: "ignore" }).status === 0;
 /** Whether `dir` already sits inside a git work tree (so we should not re-init). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-extro",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Scaffold a new Extro extension. The official starter for the Extro framework.",
   "keywords": [
     "extro",

package/templates/default/public/logo.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
-  <rect x="13.6" y="13.6" width="56" height="56" rx="10.08" fill="#0a0a0a" />
-  <rect x="30.4" y="30.4" width="56" height="56" rx="10.08" fill="#CC785C" />
+  <rect x="4.5" y="4.5" width="70" height="70" rx="12.6" fill="#fafafa" />
+  <rect x="25.5" y="25.5" width="70" height="70" rx="12.6" fill="#CC785C" />
 </svg>

package/templates/default/src/app/popup/page.tsx

@@ -2,28 +2,130 @@ import { useState } from "react"
 import { asset } from "extrojs/asset"
 
 export default function Popup() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState<number>(0)
 
   return (
-    <div style={{ width: 240, padding: 16, fontFamily: "system-ui, sans-serif" }}>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          marginBottom: 16,
-        }}
-      >
-        {/* asset() wraps chrome.runtime.getURL. logo.svg lives in public/. */}
-        <img src={asset("logo.svg")} width={20} height={20} alt="Extro" />
-        <strong>My Extension</strong>
-      </div>
+    <>
+      <style>{styles}</style>
+      <main className="popup">
+        <header className="brand">
+          {/* asset() wraps chrome.runtime.getURL. logo.svg lives in public/. */}
+          <img src={asset("logo.svg")} width={56} height={56} alt="Extro" />
+          <span className="brand-x">×</span>
+          <ReactLogo />
+        </header>
 
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        <button onClick={() => setCount((n) => n - 1)}>-</button>
-        <span style={{ minWidth: 24, textAlign: "center" }}>{count}</span>
-        <button onClick={() => setCount((n) => n + 1)}>+</button>
-      </div>
-    </div>
+        <h1>extro × react</h1>
+        <p className="tagline">Next.js for Chrome extensions.</p>
+
+        <section className="counter">
+          <button
+            className="ghost"
+            aria-label="Decrement"
+            onClick={() => setCount((n) => n - 1)}
+          >
+            −
+          </button>
+          <span className="count">{count}</span>
+          <button
+            className="solid"
+            aria-label="Increment"
+            onClick={() => setCount((n) => n + 1)}
+          >
+            +
+          </button>
+        </section>
+
+        <p className="hint">
+          Edit <code>src/app/popup/page.tsx</code> to get started.
+        </p>
+      </main>
+    </>
   )
 }
+
+const ReactLogo = () => (
+  <svg viewBox="-11.5 -10.23 23 20.46" width={56} height={56} aria-label="React">
+    <circle r="2.05" fill="#58C4DC" />
+    <g stroke="#58C4DC" fill="none">
+      <ellipse rx="11" ry="4.2" />
+      <ellipse rx="11" ry="4.2" transform="rotate(60)" />
+      <ellipse rx="11" ry="4.2" transform="rotate(120)" />
+    </g>
+  </svg>
+)
+
+const styles = `
+  :root { color-scheme: dark; }
+  body {
+    margin: 0;
+    background: #0a0a0a;
+    color: #fafafa;
+    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  }
+  .popup {
+    box-sizing: border-box;
+    width: 360px;
+    min-height: 420px;
+    padding: 40px 28px 28px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: radial-gradient(
+      320px circle at 50% 0%,
+      rgba(204, 120, 92, 0.14),
+      transparent 60%
+    );
+  }
+  .brand { display: flex; align-items: center; gap: 16px; }
+  .brand-x { font-size: 20px; color: #525252; }
+  h1 {
+    margin: 22px 0 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 21px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+  .tagline { margin: 6px 0 0; font-size: 13px; color: #a3a3a3; }
+  .counter {
+    margin-top: 28px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 14px 18px;
+    background: #141414;
+    border: 1px solid #262626;
+    border-radius: 10px;
+  }
+  .count {
+    min-width: 48px;
+    text-align: center;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 22px;
+    font-variant-numeric: tabular-nums;
+  }
+  button {
+    width: 34px;
+    height: 34px;
+    display: grid;
+    place-items: center;
+    border-radius: 6px;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .solid { border: none; background: #CC785C; color: #fff; }
+  .solid:hover { background: #b8674e; }
+  .ghost { border: 1px solid #2e2e2e; background: transparent; color: #fafafa; }
+  .ghost:hover { background: #1a1a1a; }
+  .hint { margin: auto 0 0; padding-top: 28px; font-size: 12px; color: #737373; }
+  .hint code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    padding: 2px 6px;
+    color: #CC785C;
+    background: #1a1a1a;
+    border-radius: 4px;
+  }
+`