Fix types, cli and theme

lib/app/src/app.tsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 //@ts-ignore
 import { stories, list } from "./generated-list";
 import Navigation from "./navigation";
-// import Extensions from "./extensions";
+import Extensions from "./extensions";
 import history from "./history";
 import ErrorBoundary from "./error-boundary";
 //import { encodeDelToDel, delToEncodeDel } from "./story-name";
@@ -67,7 +67,7 @@ const App: React.FC = () => {
         )}
       </main>
       <Navigation stories={list} activeStory={activeStory} />
-      {/* <Extensions /> */}
+      <Extensions />
     </div>
   );
 };

lib/app/src/extensions.tsx

@@ -5,35 +5,12 @@ const Extensions: React.FC<{}> = () => (
     <ul>
       <li
         onClick={() => {
-          const currentTheme = localStorage.getItem("theme");
-          const prefersDarkScheme = window.matchMedia(
-            "(prefers-color-scheme: dark)"
-          );
-
-          if (currentTheme !== "light" && currentTheme !== "dark") {
-            if (prefersDarkScheme.matches) {
-              document.documentElement.setAttribute("data-theme", "light");
-              localStorage.setItem("theme", "light");
-            } else {
-              document.documentElement.setAttribute("data-theme", "dark");
-              localStorage.setItem("theme", "dark");
-            }
-          } else if (currentTheme === "light") {
-            if (prefersDarkScheme.matches) {
-              document.documentElement.removeAttribute("data-theme");
-              localStorage.removeItem("theme");
-            } else {
-              document.documentElement.setAttribute("data-theme", "dark");
-              localStorage.setItem("theme", "dark");
-            }
+          if (localStorage.getItem("ladle_theme") === "light") {
+            document.documentElement.setAttribute("data-theme", "dark");
+            localStorage.setItem("ladle_theme", "dark");
           } else {
-            if (prefersDarkScheme.matches) {
-              document.documentElement.setAttribute("data-theme", "light");
-              localStorage.setItem("theme", "light");
-            } else {
-              document.documentElement.removeAttribute("data-theme");
-              localStorage.removeItem("theme");
-            }
+            document.documentElement.setAttribute("data-theme", "light");
+            localStorage.setItem("ladle_theme", "light");
           }
         }}
       >

lib/app/src/light-dark-mode.ts

@@ -1,6 +1,20 @@
-const currentTheme = localStorage.getItem("theme");
-if (currentTheme == "dark") {
-  document.documentElement.setAttribute("data-theme", "dark");
-} else if (currentTheme == "light") {
-  document.documentElement.setAttribute("data-theme", "light");
+// @ts-ignore
+console.log(window.matchMedia("(prefers-color-scheme: dark)"));
+const buildTheme = import.meta.env.SNOWPACK_PUBLIC_LADLE_THEME;
+const currentTheme = localStorage.getItem("ladle_theme");
+if (!currentTheme) {
+  if (buildTheme === "auto") {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      localStorage.setItem("ladle_theme", "dark");
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      localStorage.setItem("ladle_theme", "light");
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  } else {
+    localStorage.setItem("ladle_theme", buildTheme);
+    document.documentElement.setAttribute("data-theme", buildTheme);
+  }
+} else {
+  document.documentElement.setAttribute("data-theme", currentTheme);
 }

lib/cli/cli.ts

@@ -1,31 +1,27 @@
 #!/usr/bin/env node
-
 import program from "commander";
-import serve from "./serve";
+import dev from "./dev";
 import build from "./build";
 import path from "path";
 // @ts-ignore
 import packageJson from "../../package.json";
 import { storyGlob } from "./const";
 
+const strToInt = (n: string) => parseInt(n, 10);
+
 program
-  .command("serve")
+  .command("dev")
   .description("start developing")
   .option("-s, --stories [string]", "glob to find stories", storyGlob)
   .option(
     "-p, --port [number]",
     "port to serve the application",
-    parseInt,
+    strToInt,
     61000
   )
-  .option("--hotPort [number]", "port for hot reload", parseInt, 1234)
-  .option(
-    "--cache-dir <path>",
-    "cache directory",
-    path.join(process.cwd(), ".ladle")
-  )
+  .option("--theme [string]", "theme (light, dark, auto)", "light")
   .version(packageJson.version)
-  .action(serve);
+  .action(dev);
 
 program
   .command("build")
@@ -36,11 +32,6 @@ program
     "output directory",
     path.join(process.cwd(), "build")
   )
-  .option(
-    "--cache-dir <path>",
-    "cache directory",
-    path.join(process.cwd(), ".ladle")
-  )
   .version(packageJson.version)
   .action(build);
 

lib/cli/const.ts

@@ -1 +1,4 @@
+import path from "path";
+
 export const storyGlob = "src/**/*.stories.{js,jsx,ts,tsx}";
+export const appSrcDir = path.join(process.cwd(), "dist/app/src");

lib/cli/dev-bundler.ts

@@ -1,13 +1,12 @@
 import { startDevServer, createConfiguration, SnowpackConfig } from "snowpack";
+import getPort from "get-port";
 import path from "path";
+import { DevParamsT } from "./types";
 
-const bundler = async () => {
-  // const servePort = await getPort({
-  //   port: [params.port, 61001, 62002, 62003, 62004, 62005],
-  // });
-  // const hotPort = await getPort({
-  //   port: [params.hotPort, 1235, 1236, 1237, 1238, 1239],
-  // });
+const bundler = async (params: DevParamsT) => {
+  const port = await getPort({
+    port: [params.port, 61001, 62002, 62003, 62004, 62005],
+  });
   try {
     const bundlerConfig = {
       mount: {
@@ -20,6 +19,9 @@ const bundler = async () => {
         path.join(__dirname, "./snowpack-plugin.js"),
         "@snowpack/plugin-react-refresh",
       ],
+      devOptions: {
+        port,
+      },
     };
     const config = createConfiguration(bundlerConfig)[1] as SnowpackConfig;
     await startDevServer({ config, lockfile: null, cwd: process.cwd() });

lib/cli/dev.ts

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+import devBundler from "./dev-bundler";
+import { DevParamsT } from "./types";
+
+const serve = async (params: DevParamsT) => {
+  process.env["SNOWPACK_PUBLIC_LADLE_THEME"] = params.theme;
+  await devBundler(params);
+};
+
+export default serve;

lib/cli/get-list.ts

@@ -10,8 +10,8 @@ import {
   getEncodedStoryName,
   storyDelimiter,
   storyEncodeDelimiter,
-  //capitalize,
 } from "../app/src/story-name";
+import { appSrcDir } from "./const";
 import { kebabCase } from "./utils";
 
 const plugins: ParserPlugin[] = [
@@ -74,7 +74,7 @@ const getStories = (stories: string[]) => {
   ).code;
 };
 
-const getList = async (entries: string[], cacheDir: string) => {
+const getList = async (entries: string[]) => {
   let output = `import { lazy } from "react";\n`;
   const lazyImport = template(`
     export var %%component%% = lazy(() =>
@@ -107,7 +107,7 @@ const getList = async (entries: string[], cacheDir: string) => {
         );
         const ast = lazyImport({
           source: t.stringLiteral(
-            path.join(path.relative(path.join(cacheDir), process.cwd()), entry)
+            path.join(path.relative(appSrcDir, process.cwd()), entry)
           ),
           component: t.identifier(componentName),
           story: t.identifier(storyName),

lib/cli/snowpack-plugin.ts

@@ -1,20 +1,16 @@
-import path from "path";
-import getList from "./get-list";
-import { storyGlob } from "./const";
 import globby from "globby";
 import micromatch from "micromatch";
 import { SnowpackPlugin } from "snowpack";
+import getList from "./get-list";
+import { storyGlob } from "./const";
 
 const Plugin = (): SnowpackPlugin => {
   let listId = "";
   let listContent = "";
 
   const genList = async () => {
     const entries = await globby([storyGlob]);
-    listContent = await getList(
-      entries,
-      path.join(process.cwd(), "dist/app/src")
-    );
+    listContent = await getList(entries);
   };
 
   return {

lib/cli/types.ts

@@ -13,15 +13,15 @@ export type GeneratedStoriesT = {
   };
 };
 
-export type ServeParamsT = {
+export type ThemeT = "light" | "dark" | "auto";
+
+export type DevParamsT = {
   stories: string;
   port: number;
-  hotPort: number;
-  cacheDir: string;
+  theme: ThemeT;
 };
 
 export type BuildParamsT = {
   stories: string;
-  cacheDir: string;
   outDir: string;
 };

package.json

@@ -7,15 +7,19 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "lib"
   ],
   "bin": {
     "ladle": "./dist/cli.js"
   },
   "scripts": {
-    "clean": "rimraf dist && rimraf .ladle && rimraf build && rimraf *.tsbuildinfo",
     "cli": "node ./dist/cli/cli",
-    "dev": "node scripts/dev-watch",
+    "clean": "rimraf dist && rimraf .ladle && rimraf build && rimraf *.tsbuildinfo",
+    "build": "node ./dist/cli/cli build",
+    "dev": "node ./dist/cli/cli dev",
+    "lib-build": "tsc --project tsconfig.cli.json",
+    "lib-dev": "tsc --project tsconfig.cli.json --watch",
     "test": "jest"
   },
   "dependencies": {

src/my-blah.stories.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
 
 export default {
-  title: "This is my title",
+  title: "This is my titlee",
 };
 
 export const Middle: React.FC = () => {
   const [val, setVal] = React.useState(true);
   return (
     <div>
-      <h1>Middle eeee lol strange omg asd haha</h1>
+      <h1>!Middle eeee lol strange omg asd haha</h1>
       <button onClick={() => setVal(false)}>
         button {val ? "true" : "false"}
       </button>

tests/get-list.test.ts

@@ -2,30 +2,24 @@ import getList from "../lib/get-list";
 
 test("Single file with two stories", async () => {
   expect(
-    await getList(["./tests/fixtures/animals.stories.tsx"], "cacheDir")
+    await getList(["./tests/fixtures/animals.stories.tsx"])
   ).toMatchSnapshot();
 });
 
 test("Capital letters in story names converted into delimiters", async () => {
   expect(
-    await getList(["./tests/fixtures/capitalization.stories.tsx"], "cacheDir")
+    await getList(["./tests/fixtures/capitalization.stories.tsx"])
   ).toMatchSnapshot();
 });
 
 test("Capital letters in the filename converted into delimiters", async () => {
   expect(
-    await getList(
-      ["./tests/fixtures/filenameCapitalization.stories.tsx"],
-      "cacheDir"
-    )
+    await getList(["./tests/fixtures/filenameCapitalization.stories.tsx"])
   ).toMatchSnapshot();
 });
 
 test("Turn file name delimiters into spaces and levels correctly", async () => {
   expect(
-    await getList(
-      ["./tests/fixtures/our-animals--mammals.stories.tsx"],
-      "cacheDir"
-    )
+    await getList(["./tests/fixtures/our-animals--mammals.stories.tsx"])
   ).toMatchSnapshot();
 });