fix: cjs package and requiring babel flow (tajo#29)

talshani · Nov 9, 2021 · 8d9c905 · 8d9c905
1 parent 6b1d5f8
commit 8d9c905
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 28 deletions.
diff --git a/packages/ladle/build-cjs.js b/packages/ladle/build-cjs.js
@@ -42,9 +42,14 @@ filesWithDirname.forEach((file) => {
         `const _dirname = _path.default.dirname((0, _url.fileURLToPath)(import.meta.url));`,
         "const _dirname = __dirname",
       )
+      .replace(
+        `const _require = (0, _module.createRequire)(import.meta.url);`,
+        `const _require = require;`,
+      )
       .replace("_template.default.default", "_template.default")
       .replace("_generator.default.default", "_generator.default")
-      .replace("_traverse.default.default", "_traverse.default"),
+      .replace("_traverse.default.default", "_traverse.default")
+      .replace(/_types.default./gi, "_types."),
     (err) => {
       if (err) return console.log(err);
       console.log(`${file} updated`);

diff --git a/packages/ladle/lib/cli/vite-base.js b/packages/ladle/lib/cli/vite-base.js
@@ -1,8 +1,11 @@
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 import react from "@vitejs/plugin-react";
+import { createRequire } from "module";
 import ladlePlugin from "./vite-plugin/vite-plugin.js";
 
+const require = createRequire(import.meta.url);
+
 /**
  * @param ladleConfig {import("../shared/types").Config}
  * @param configFolder {string}
@@ -31,7 +34,10 @@ const getBaseViteConfig = (ladleConfig, configFolder, viteConfig) => {
       ladlePlugin(ladleConfig, configFolder),
       react({
         babel: {
-          presets: ["@babel/preset-flow", ...ladleConfig.babelPresets],
+          presets: [
+            require.resolve("@babel/preset-flow"),
+            ...ladleConfig.babelPresets,
+          ],
           plugins: ladleConfig.babelPlugins,
         },
       }),

diff --git a/packages/ladle/lib/cli/vite-plugin/ast-to-obj.js b/packages/ladle/lib/cli/vite-plugin/ast-to-obj.js
@@ -2,30 +2,20 @@
 // nd-02110114/babel-plugin-object-to-json-parse
 // https://github.com/nd-02110114/babel-plugin-object-to-json-parse/blob/master/src/utils.ts
 
-import * as babelTypes from "@babel/types";
-const {
-  isArrayExpression,
-  isBooleanLiteral,
-  isObjectExpression,
-  isNullLiteral,
-  isNumericLiteral,
-  isUnaryExpression,
-  isStringLiteral,
-  isObjectProperty,
-} = babelTypes;
+import t from "@babel/types";
 
 /**
  * @param {object | null | undefined} node
  * @returns {boolean}
  */
 const isValidJsonValue = (node) => {
   if (
-    isNumericLiteral(node) ||
-    isStringLiteral(node) ||
-    isBooleanLiteral(node) ||
-    isNullLiteral(node) ||
-    isArrayExpression(node) ||
-    isObjectExpression(node)
+    t.isNumericLiteral(node) ||
+    t.isStringLiteral(node) ||
+    t.isBooleanLiteral(node) ||
+    t.isNullLiteral(node) ||
+    t.isArrayExpression(node) ||
+    t.isObjectExpression(node)
   ) {
     return true;
   }
@@ -39,7 +29,7 @@ const isValidJsonValue = (node) => {
  * @returns {boolean}
  */
 const isObjectExpressionWithOnlyObjectProperties = (node) => {
-  return node.properties.every((property) => isObjectProperty(property));
+  return node.properties.every((property) => t.isObjectProperty(property));
 };
 
 /**
@@ -79,9 +69,9 @@ const createSafeStringForJsonParse = (value) => {
  */
 export function converter(node) {
   // for negative number, ex) -10
-  if (isUnaryExpression(node)) {
+  if (t.isUnaryExpression(node)) {
     const { operator, argument } = node;
-    if (operator === "-" && isNumericLiteral(argument)) {
+    if (operator === "-" && t.isNumericLiteral(argument)) {
       return -argument.value;
     }
   }
@@ -90,22 +80,22 @@ export function converter(node) {
     throw new Error("Invalid value is included.");
   }
 
-  if (isStringLiteral(node)) {
+  if (t.isStringLiteral(node)) {
     const { value } = node;
     const safeValue = createSafeStringForJsonParse(value);
     return safeValue;
   }
 
-  if (isNullLiteral(node)) {
+  if (t.isNullLiteral(node)) {
     return null;
   }
 
-  if (isArrayExpression(node)) {
+  if (t.isArrayExpression(node)) {
     const { elements } = node;
     return elements.map((node) => converter(node));
   }
 
-  if (isObjectExpression(node)) {
+  if (t.isObjectExpression(node)) {
     if (!isObjectExpressionWithOnlyObjectProperties(node)) {
       throw new Error("Invalid syntax is included.");
     }

diff --git a/packages/ladle/lib/cli/vite-plugin/generate/get-story-imports.js b/packages/ladle/lib/cli/vite-plugin/generate/get-story-imports.js
@@ -1,6 +1,6 @@
 import template from "@babel/template";
 import generate from "@babel/generator";
-import * as t from "@babel/types";
+import t from "@babel/types";
 import path from "path";
 import { fileURLToPath } from "url";
 

diff --git a/packages/ladle/lib/cli/vite-plugin/generate/get-story-list.js b/packages/ladle/lib/cli/vite-plugin/generate/get-story-list.js
@@ -1,4 +1,4 @@
-import * as t from "@babel/types";
+import t from "@babel/types";
 import generate from "@babel/generator";
 import template from "@babel/template";
 import { storyDelimiter, storyEncodeDelimiter } from "../naming-utils.js";