diff --git a/example/.storybook/main.js b/example/.storybook/main.js index 69efd75..5896230 100644 --- a/example/.storybook/main.js +++ b/example/.storybook/main.js @@ -7,7 +7,7 @@ module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], // monaco-editor needs static files to be available at runtime. staticDirs: [ - ...getCodeEditorStaticDirs(), + ...getCodeEditorStaticDirs(__filename), // getExtraStaticDir('monaco-editor/esm'), ], addons: [ diff --git a/example/package-lock.json b/example/package-lock.json index c413f61..df34c2a 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -8,23 +8,28 @@ "name": "example-library", "version": "0.0.0", "devDependencies": { + "@babel/core": "^7.22.5", + "@mdx-js/react": "^1.6.22", "@storybook/addon-docs": "^6.5.16", "@storybook/addon-essentials": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", "@storybook/react": "^6.5.16", "@types/react": "^17.0.39", + "raw-loader": "4.0.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "require-from-string": "^2.0.2", "storybook-addon-code-editor": "file:../", - "typescript": "^4.9.5" + "typescript": "^4.9.5", + "webpack": "^5.75.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "..": { - "version": "2.1.0", + "version": "2.2.0", "dev": true, "license": "MIT", "dependencies": { @@ -41,7 +46,8 @@ "@babel/preset-typescript": "^7.22.5", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.2", - "@types/react": "^17.0.39", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "prettier": "^2.8.8", @@ -15158,7 +15164,6 @@ "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", "dev": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -29299,8 +29304,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", - "dev": true, - "peer": true + "dev": true }, "resolve": { "version": "1.22.2", @@ -30279,7 +30283,8 @@ "@storybook/components": "^6.5.16", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.2", - "@types/react": "^17.0.39", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "monaco-editor": "^0.39.0", diff --git a/example/package.json b/example/package.json index 35e225f..d297a6c 100755 --- a/example/package.json +++ b/example/package.json @@ -10,16 +10,21 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "devDependencies": { + "@babel/core": "^7.22.5", + "@mdx-js/react": "^1.6.22", "@storybook/addon-docs": "^6.5.16", "@storybook/addon-essentials": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", "@storybook/react": "^6.5.16", "@types/react": "^17.0.39", + "raw-loader": "4.0.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "require-from-string": "^2.0.2", "storybook-addon-code-editor": "file:../", - "typescript": "^4.9.5" + "typescript": "^4.9.5", + "webpack": "^5.75.0" }, "overrides": { "webpack": "^5.75.0" diff --git a/getStaticDirs.d.ts b/getStaticDirs.d.ts index 0bbb06c..e98b125 100644 --- a/getStaticDirs.d.ts +++ b/getStaticDirs.d.ts @@ -1,2 +1,7 @@ -export declare function getCodeEditorStaticDirs(): { to: string; from: string }[]; -export declare function getExtraStaticDir(specifier: string): { to: string; from: string }; +type Resolver = (specifier: string, relativeToFile?: string) => { to: string; from: string }; + +export declare function getCodeEditorStaticDirs(relativeToFile?: string): { to: string; from: string }[]; +export declare function getExtraStaticDir( + specifier: string, + relativeToFile?: string +): { to: string; from: string }; diff --git a/getStaticDirs.js b/getStaticDirs.js index 469da14..5153cfe 100644 --- a/getStaticDirs.js +++ b/getStaticDirs.js @@ -1,21 +1,50 @@ -const fs = require('fs'); +// @ts-check const { createRequire } = require('module'); const path = require('path'); +function resolve(reqFn, packageName) { + try { + return reqFn.resolve(`${packageName}/package.json`); + } catch (err) { + return reqFn.resolve(packageName); + } +} + +function resolvePackagePath(reqFn, packageName) { + let error; + let result; + try { + const packageEntryFile = resolve(reqFn, packageName); + const namePosition = packageEntryFile.indexOf(`/${packageName}/`); + if (namePosition === -1) { + error = new Error( + `Cannot resolve package path for: '${packageName}'.\nEntry file: ${packageEntryFile}` + ); + } else { + result = `${packageEntryFile.slice(0, namePosition)}/${packageName}/`; + } + } catch (err) { + // Sometimes the require function can't find the entry file but knows the path. + result = + /Source path: (.+)/.exec(err?.message)?.[1] || + /main defined in (.+?)\/package\.json/.exec(err?.message)?.[1]; + if (!result) { + error = err; + } + } + if (result) { + return result; + } + throw error; +} + function getStaticDir(specifier, relativeToFile = __filename) { const [pn1, pn2, ...pathParts] = specifier.split('/'); const isScopedPackage = !!(specifier.startsWith('@') && pn2); const packageName = isScopedPackage ? `${pn1}/${pn2}` : pn1; const dirPath = (isScopedPackage ? pathParts : [pn2, ...pathParts]).join('/'); const require = createRequire(relativeToFile); - const packageDir = require.resolve - .paths(specifier) - .map((p) => path.join(p, packageName)) - .find((p) => fs.existsSync(p)); - - if (!packageDir) { - throw new Error(`Cannot find module '${packageName}'`); - } + const packageDir = resolvePackagePath(require, packageName); return { from: path.join(packageDir, dirPath), @@ -29,7 +58,10 @@ function tryGetStaticDir(packageName, relativeToFile) { } catch (err) {} } -exports.getCodeEditorStaticDirs = () => - [tryGetStaticDir('@types/react'), getStaticDir('monaco-editor/min')].filter(Boolean); +exports.getCodeEditorStaticDirs = (relativeToFile) => + [ + tryGetStaticDir('@types/react', relativeToFile), + getStaticDir('monaco-editor/min', __filename), + ].filter(Boolean); exports.getExtraStaticDir = getStaticDir; diff --git a/package-lock.json b/package-lock.json index 3ff75a8..a602170 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,8 @@ "@babel/preset-typescript": "^7.22.5", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.2", - "@types/react": "^17.0.39", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "prettier": "^2.8.8", @@ -3150,9 +3151,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "17.0.62", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.62.tgz", - "integrity": "sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==", + "version": "18.2.55", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz", + "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -3161,9 +3162,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.2.5", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz", - "integrity": "sha512-sRQsOS/sCLnpQhR4DSKGTtWFE3FZjpQa86KPVbhUqdYMRZ9FEFcfAytKhR/vUG2rH1oFbOOej6cuD7MFSobDRQ==", + "version": "18.2.19", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz", + "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==", "dev": true, "dependencies": { "@types/react": "*" @@ -10945,9 +10946,9 @@ "dev": true }, "@types/react": { - "version": "17.0.62", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.62.tgz", - "integrity": "sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==", + "version": "18.2.55", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz", + "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==", "dev": true, "requires": { "@types/prop-types": "*", @@ -10956,9 +10957,9 @@ } }, "@types/react-dom": { - "version": "18.2.5", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz", - "integrity": "sha512-sRQsOS/sCLnpQhR4DSKGTtWFE3FZjpQa86KPVbhUqdYMRZ9FEFcfAytKhR/vUG2rH1oFbOOej6cuD7MFSobDRQ==", + "version": "18.2.19", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz", + "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==", "dev": true, "requires": { "@types/react": "*" diff --git a/package.json b/package.json index 3fafa42..926db3f 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,8 @@ "@babel/preset-typescript": "^7.22.5", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.2", - "@types/react": "^17.0.39", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "prettier": "^2.8.8",