fix: prod build (tajo#45)

* fix: prod build

* fix: jsx loader and boxen esm

packages/example/package.json

@@ -13,5 +13,9 @@
     "@ladle/react": "^0.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "volta": {
+    "node": "16.12.0",
+    "yarn": "1.22.15"
   }
 }

packages/ladle/lib/cli/cli.js

@@ -8,6 +8,8 @@ import build from "./build.js";
  */
 const strToInt = (n) => parseInt(n, 10);
 
+program.showHelpAfterError().showSuggestionAfterError();
+
 program
   .command("serve")
   .description("start developing")

packages/ladle/lib/cli/strip-flow.js

@@ -38,23 +38,13 @@ export function flowPlugin(
   };
 }
 
-const jsxRegex = /\.jsx$/;
-
-/**
- *
- * @param {string} path
- * @returns string
- */
-const defaultloaderFunction = (path) => (jsxRegex.test(path) ? "jsx" : "js");
-
 /**
  * Create an esbuild plugin object
  *
  * @returns {import('esbuild').Plugin} Returns esbuild plugin object
  */
 export function esbuildFlowPlugin(
   filter = /\.(flow|jsx?)$/,
-  loaderFunction = defaultloaderFunction,
   flowOptions = {
     all: false,
     pretty: false,
@@ -79,7 +69,7 @@ export function esbuildFlowPlugin(
           const transformed = flowRemoveTypes(src, flowOptions);
           return {
             contents: transformed.toString().replace(EXPORT_TYPES, ""),
-            loader: loaderFunction(path),
+            loader: src.includes("@flow\n") ? "jsx" : "js",
           };
         } catch (error) {
           return {

packages/ladle/lib/cli/vite-base.js

@@ -1,5 +1,7 @@
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
+import globby from "globby";
+import path from "path";
 import react from "@vitejs/plugin-react";
 import ladlePlugin from "./vite-plugin/vite-plugin.js";
 import { flowPlugin, esbuildFlowPlugin } from "./strip-flow.js";
@@ -9,7 +11,11 @@ import { flowPlugin, esbuildFlowPlugin } from "./strip-flow.js";
  * @param configFolder {string}
  * @param viteConfig {import('@miksu/vite').InlineConfig}
  */
-const getBaseViteConfig = (ladleConfig, configFolder, viteConfig) => {
+const getBaseViteConfig = async (ladleConfig, configFolder, viteConfig) => {
+  // entries that vite crawls to find deps for pre-bundling
+  const entries = (await globby([ladleConfig.stories])).map((entry) =>
+    path.join(process.cwd(), entry),
+  );
   const __dirname = dirname(fileURLToPath(import.meta.url));
   /**
    * @type {import('@miksu/vite').InlineConfig}
@@ -20,11 +26,7 @@ const getBaseViteConfig = (ladleConfig, configFolder, viteConfig) => {
     root: join(__dirname, "../app/"),
     base: ladleConfig.build.baseUrl,
     define: {
-      __BROWSER__: true,
-      __NODE__: false,
-      process: {
-        env: {},
-      },
+      ...(ladleConfig.define ? ladleConfig.define : {}),
       ...(viteConfig.define ? viteConfig.define : {}),
     },
     cacheDir: join(process.cwd(), "node_modules/.vite"),
@@ -43,6 +45,7 @@ const getBaseViteConfig = (ladleConfig, configFolder, viteConfig) => {
         "query-string",
         "@reach/dialog",
       ],
+      entries,
     },
     plugins: [
       flowPlugin(),

packages/ladle/lib/cli/vite-dev.js

@@ -2,6 +2,7 @@ import { createServer } from "@miksu/vite";
 import express from "express";
 import getPort from "get-port";
 import globby from "globby";
+import boxen from "boxen";
 import open from "open";
 import debug from "./debug.js";
 import getBaseViteConfig from "./vite-base.js";
@@ -22,11 +23,9 @@ const bundler = async (config, configFolder) => {
     /**
      * @type {import('@miksu/vite').InlineConfig}
      */
-    const viteConfig = getBaseViteConfig(config, configFolder, {
+    const viteConfig = await getBaseViteConfig(config, configFolder, {
       mode: "development",
-      define: {
-        __DEV__: true,
-      },
+      define: config.serve.define,
       server: {
         port: config.serve.port,
         open: config.serve.open,
@@ -45,13 +44,17 @@ const bundler = async (config, configFolder) => {
     });
     app.use(vite.middlewares);
     app.listen(port, async () => {
-      console.log("");
-      console.log("****************************************************");
-      console.log("");
-      console.log(`      Ladle served at http://localhost:${port}`);
-      console.log("");
-      console.log("****************************************************");
-      console.log("");
+      console.log(
+        boxen(`🥄 Ladle.dev served at http://localhost:${port}`, {
+          padding: 1,
+          margin: 1,
+          borderStyle: "round",
+          borderColor: "yellow",
+          titleAlignment: "center",
+          textAlignment: "center",
+        }),
+      );
+
       if (config.serve.open !== "none") {
         await open(
           `http://localhost:${port}`,

packages/ladle/lib/cli/vite-prod.js

@@ -11,16 +11,14 @@ const viteProd = async (config, configFolder) => {
     /**
      * @type {import('@miksu/vite').InlineConfig}
      */
-    const viteConfig = getBaseViteConfig(config, configFolder, {
+    const viteConfig = await getBaseViteConfig(config, configFolder, {
       mode: "production",
-      define: {
-        __DEV__: false,
-      },
+      define: config.build.define,
       build: {
         outDir: path.join(process.cwd(), config.build.out),
         sourcemap: config.build.sourcemap,
         emptyOutDir: true,
-        chunkSizeWarningLimit: 750,
+        chunkSizeWarningLimit: 1024,
       },
     });
     await build(viteConfig);

packages/ladle/lib/shared/default-config.js

@@ -12,6 +12,7 @@ export default {
   defaultStory: "",
   babelPresets: [],
   babelPlugins: [],
+  define: {},
   addons: {
     control: {
       enabled: true,
@@ -39,10 +40,12 @@ export default {
     open: "**Default**",
     port: 61000,
     output: "dashboard",
+    define: {},
   },
   build: {
     out: "build",
     sourcemap: false,
     baseUrl: "/",
+    define: {},
   },
 };

packages/ladle/lib/shared/types.ts

@@ -148,6 +148,7 @@ export type Config = {
   defaultStory: string;
   babelPlugins: any[];
   babelPresets: any[];
+  define: { [key: string]: string };
   addons: {
     control: {
       enabled: boolean;
@@ -173,11 +174,13 @@ export type Config = {
     open: string;
     port: number;
     output: string;
+    define: { [key: string]: string };
   };
   build: {
     out: string;
     sourcemap: boolean | "hidden" | "inline" | undefined;
     baseUrl: string;
+    define: { [key: string]: string };
   };
 };
 

packages/ladle/package.json

@@ -39,6 +39,7 @@
     "@miksu/vite": "^0.0.2",
     "@reach/dialog": "^0.16.2",
     "@vitejs/plugin-react": "^1.2.0",
+    "boxen": "^5.1.2",
     "classnames": "^2.3.1",
     "commander": "^8.3.0",
     "debug": "^4.3.3",

yarn.lock

@@ -4257,7 +4257,7 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-boxen@^5.0.0, boxen@^5.0.1:
+boxen@^5.0.0, boxen@^5.0.1, boxen@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
   integrity sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==