mdx-artifacts 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -1
- package/dist/lib/cli/vite-artifact.js +43 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -47,7 +47,19 @@ Astro is intentionally not part of the core yet. It can become a later adapter f
|
|
|
47
47
|
Install in a project that should build local artifacts:
|
|
48
48
|
|
|
49
49
|
```bash
|
|
50
|
-
pnpm add mdx-artifacts
|
|
50
|
+
pnpm add -D mdx-artifacts
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
In a pnpm workspace root, make the workspace-root install explicit:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
pnpm add -Dw mdx-artifacts
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
React and React DOM are peer dependencies. Modern package managers usually install them automatically for this dev-tool workflow. If peer dependency auto-install is disabled in your project, install them explicitly:
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
pnpm add -D mdx-artifacts react react-dom
|
|
51
63
|
```
|
|
52
64
|
|
|
53
65
|
Initialize a workspace:
|
|
@@ -3,6 +3,7 @@ import tailwindcss from "@tailwindcss/vite";
|
|
|
3
3
|
import react from "@vitejs/plugin-react";
|
|
4
4
|
import { randomUUID } from "node:crypto";
|
|
5
5
|
import { access, mkdir, readFile, rm, writeFile } from "node:fs/promises";
|
|
6
|
+
import { createRequire } from "node:module";
|
|
6
7
|
import path from "node:path";
|
|
7
8
|
import { fileURLToPath } from "node:url";
|
|
8
9
|
import { createServer, build as viteBuild } from "vite";
|
|
@@ -17,7 +18,9 @@ export async function createArtifactProject(projectRoot, mdxPath, config) {
|
|
|
17
18
|
const entryPath = path.join(srcDir, "entry.tsx");
|
|
18
19
|
const mdxImport = toRelativeImport(entryPath, mdxPath);
|
|
19
20
|
const styleImports = createStyleImports(projectRoot, entryPath, config);
|
|
20
|
-
const
|
|
21
|
+
const reactEntryPath = await resolveReactEntryPath();
|
|
22
|
+
const reactEntryImport = toRelativeImport(entryPath, reactEntryPath);
|
|
23
|
+
const reactAliases = resolveReactAliases(projectRoot);
|
|
21
24
|
await mkdir(srcDir, { recursive: true });
|
|
22
25
|
await writeFile(path.join(tmpDir, "index.html"), `<!doctype html>
|
|
23
26
|
<html lang="en">
|
|
@@ -58,6 +61,17 @@ createRoot(document.getElementById("root")!).render(<App />);
|
|
|
58
61
|
root: tmpDir,
|
|
59
62
|
logLevel: "warn",
|
|
60
63
|
plugins: [artifactStatePlugin(projectRoot, artifact), react(), mdx(), tailwindcss()],
|
|
64
|
+
resolve: {
|
|
65
|
+
alias: [
|
|
66
|
+
...reactAliases,
|
|
67
|
+
{ find: /^mdx-artifacts\/react$/, replacement: reactEntryPath },
|
|
68
|
+
{ find: /^mdx-artifacts$/, replacement: reactEntryPath }
|
|
69
|
+
],
|
|
70
|
+
dedupe: ["react", "react-dom"]
|
|
71
|
+
},
|
|
72
|
+
optimizeDeps: {
|
|
73
|
+
exclude: ["mdx-artifacts", "mdx-artifacts/react"]
|
|
74
|
+
},
|
|
61
75
|
server: {
|
|
62
76
|
port: config.port,
|
|
63
77
|
fs: {
|
|
@@ -163,6 +177,34 @@ async function resolveReactEntryPath() {
|
|
|
163
177
|
return sourceEntryPath;
|
|
164
178
|
}
|
|
165
179
|
}
|
|
180
|
+
function resolveReactAliases(projectRoot) {
|
|
181
|
+
const projectRequire = createRequire(path.join(projectRoot, "package.json"));
|
|
182
|
+
const packageRequire = createRequire(import.meta.url);
|
|
183
|
+
return [
|
|
184
|
+
{ find: /^react$/, replacement: resolveFromProjectOrPackage(projectRequire, packageRequire, "react") },
|
|
185
|
+
{
|
|
186
|
+
find: /^react\/jsx-runtime$/,
|
|
187
|
+
replacement: resolveFromProjectOrPackage(projectRequire, packageRequire, "react/jsx-runtime")
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
find: /^react\/jsx-dev-runtime$/,
|
|
191
|
+
replacement: resolveFromProjectOrPackage(projectRequire, packageRequire, "react/jsx-dev-runtime")
|
|
192
|
+
},
|
|
193
|
+
{ find: /^react-dom$/, replacement: resolveFromProjectOrPackage(projectRequire, packageRequire, "react-dom") },
|
|
194
|
+
{
|
|
195
|
+
find: /^react-dom\/client$/,
|
|
196
|
+
replacement: resolveFromProjectOrPackage(projectRequire, packageRequire, "react-dom/client")
|
|
197
|
+
}
|
|
198
|
+
];
|
|
199
|
+
}
|
|
200
|
+
function resolveFromProjectOrPackage(projectRequire, packageRequire, specifier) {
|
|
201
|
+
try {
|
|
202
|
+
return projectRequire.resolve(specifier);
|
|
203
|
+
}
|
|
204
|
+
catch {
|
|
205
|
+
return packageRequire.resolve(specifier);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
166
208
|
export async function startDevServer(project) {
|
|
167
209
|
const server = await createServer(project.config);
|
|
168
210
|
await server.listen();
|