From 8d9c905a1c5217a28e5341ad491fb9a29f3a44ba Mon Sep 17 00:00:00 2001 From: Vojtech Miksu Date: Tue, 9 Nov 2021 12:32:44 -0800 Subject: [PATCH] fix: cjs package and requiring babel flow (#29) --- packages/ladle/build-cjs.js | 7 +++- packages/ladle/lib/cli/vite-base.js | 8 +++- .../ladle/lib/cli/vite-plugin/ast-to-obj.js | 38 +++++++------------ .../vite-plugin/generate/get-story-imports.js | 2 +- .../vite-plugin/generate/get-story-list.js | 2 +- 5 files changed, 29 insertions(+), 28 deletions(-) diff --git a/packages/ladle/build-cjs.js b/packages/ladle/build-cjs.js index 67509495..fe5407b9 100755 --- 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 index a068cf66..d9545c14 100644 --- 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 index 0b6f51b4..5d5ab708 100644 --- a/packages/ladle/lib/cli/vite-plugin/ast-to-obj.js +++ b/packages/ladle/lib/cli/vite-plugin/ast-to-obj.js @@ -2,17 +2,7 @@ // 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 @@ -20,12 +10,12 @@ const { */ 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 index c0faa17c..e690a211 100644 --- 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 index 8a426576..32dd04db 100644 --- 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";