vite-plugin-react-deck 1.0.8 → 1.1.0

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/config.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { PestacleConfig } from "./types";
2
+ /**
3
+ * Allow to type the config object (similar to Vite's defineConfig)
4
+ */
5
+ export declare function defineConfig(config: PestacleConfig): PestacleConfig;
6
+ /**
7
+ * Create a default config object
8
+ */
9
+ export declare function createDefaultConfig(): PestacleConfig;
10
+ /**
11
+ * Load the config file from the project root
12
+ */
13
+ export declare function loadConfigFile(): Promise<PestacleConfig>;
package/helpers.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  export declare function createIndexFile({ entrypoint }: {
2
2
  entrypoint: string;
3
3
  }): string;
4
- export declare function createAppDeckFile({ slidePath }: {
4
+ export declare function createAppDeckFile({ slidePath, theme, config, }: {
5
5
  slidePath: string;
6
+ theme: string;
7
+ config: {
8
+ layoutsFile: string;
9
+ };
6
10
  }): string;
package/index.cjs CHANGED
@@ -4,6 +4,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __getProtoOf = Object.getPrototypeOf;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
7
11
  var __copyProps = (to, from, except, desc) => {
8
12
  if (from && typeof from === "object" || typeof from === "function") {
9
13
  for (let key of __getOwnPropNames(from))
@@ -26,6 +30,7 @@ var fs2 = __toESM(require("fs/promises"), 1);
26
30
 
27
31
  // src/slides.ts
28
32
  var import_gray_matter = __toESM(require("gray-matter"), 1);
33
+ var import_remark_directive = __toESM(require("remark-directive"), 1);
29
34
  var import_fs = __toESM(require("fs"), 1);
30
35
  var import_mdx = require("@mdx-js/mdx");
31
36
 
@@ -66,6 +71,20 @@ ${header}
66
71
 
67
72
  // src/slides.ts
68
73
  var import_remark_gfm = __toESM(require("remark-gfm"), 1);
74
+ var import_unist_util_visit = require("unist-util-visit");
75
+ function myRemarkPlugin() {
76
+ return (tree) => {
77
+ (0, import_unist_util_visit.visit)(tree, (node) => {
78
+ if (node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective") {
79
+ const data = node.data || (node.data = {});
80
+ data.hName = "directive";
81
+ data.hProperties = node.attributes;
82
+ data.hProperties._name = node.name;
83
+ data.hProperties._kind = node.type;
84
+ }
85
+ });
86
+ };
87
+ }
69
88
  async function transformSlidesMdxToReact(sourceContent, {
70
89
  production: isProd,
71
90
  ...options
@@ -99,8 +118,13 @@ ${slide}
99
118
  outputFormat: "program",
100
119
  jsx: !isProd,
101
120
  providerImportSource: "@mdx-js/react",
102
- remarkPlugins: [import_remark_gfm.default],
103
- ...options
121
+ ...options,
122
+ remarkPlugins: [
123
+ import_remark_gfm.default,
124
+ import_remark_directive.default,
125
+ myRemarkPlugin,
126
+ ...options.remarkPlugins
127
+ ]
104
128
  });
105
129
  const mainCode = extractMainCodeAsChildren(result.value.toString(), {
106
130
  isJsx: !isProd
@@ -167,6 +191,42 @@ function normalizeNewline(input) {
167
191
  return input.replace(new RegExp(CRLF, "g"), "\n");
168
192
  }
169
193
 
194
+ // src/themes/index.ts
195
+ var themes_exports = {};
196
+ __export(themes_exports, {
197
+ green: () => green_exports,
198
+ purple: () => purple_exports
199
+ });
200
+
201
+ // src/themes/green.ts
202
+ var green_exports = {};
203
+ __export(green_exports, {
204
+ themeTokens: () => themeTokens
205
+ });
206
+ var colors = {
207
+ primary: "#FFFFFF",
208
+ secondary: "#F49676",
209
+ tertiary: "#042F3B"
210
+ };
211
+ var themeTokens = {
212
+ colors
213
+ };
214
+
215
+ // src/themes/purple.ts
216
+ var purple_exports = {};
217
+ __export(purple_exports, {
218
+ themeTokens: () => themeTokens2
219
+ });
220
+ var colors2 = {
221
+ //primary: "#56D4F8",
222
+ primary: "#ffffff",
223
+ secondary: "#F530EC",
224
+ tertiary: "#2B135A"
225
+ };
226
+ var themeTokens2 = {
227
+ colors: colors2
228
+ };
229
+
170
230
  // src/helpers.ts
171
231
  function createIndexFile({ entrypoint }) {
172
232
  return `<!DOCTYPE html>
@@ -191,10 +251,19 @@ function createIndexFile({ entrypoint }) {
191
251
  </html>
192
252
  `;
193
253
  }
194
- function createAppDeckFile({ slidePath }) {
254
+ function createAppDeckFile({
255
+ slidePath,
256
+ theme,
257
+ config
258
+ }) {
259
+ if (!themes_exports[theme]) {
260
+ throw new Error(`Theme ${theme} not found`);
261
+ }
262
+ const themeObject = themes_exports[theme];
195
263
  return `import React, { StrictMode } from "react";
196
264
  import * as ReactDOM from "react-dom/client";
197
265
  import { Deck } from '@gpichot/spectacle-deck';
266
+ import layouts from "${config.layoutsFile}";
198
267
 
199
268
  import deck from "${slidePath}";
200
269
 
@@ -203,7 +272,7 @@ const root = ReactDOM.createRoot(
203
272
  );
204
273
  root.render(
205
274
  <StrictMode>
206
- <Deck deck={deck} />
275
+ <Deck deck={deck} theme={${JSON.stringify(themeObject)}} layouts={layouts} />
207
276
  </StrictMode>
208
277
  )`;
209
278
  }
@@ -211,6 +280,17 @@ root.render(
211
280
  // src/index.ts
212
281
  var glob = __toESM(require("glob"), 1);
213
282
  var import_node_path = __toESM(require("path"), 1);
283
+
284
+ // src/config.ts
285
+ var import_lodash = __toESM(require("lodash"), 1);
286
+
287
+ // src/types.ts
288
+ var import_zod = require("zod");
289
+ var PestacleConfigSchema = import_zod.z.object({
290
+ theme: import_zod.z.enum(["green", "purple"]).default("green")
291
+ });
292
+
293
+ // src/index.ts
214
294
  async function checkIfDirectoryExists(path2) {
215
295
  try {
216
296
  await fs2.access(path2);
@@ -219,17 +299,44 @@ async function checkIfDirectoryExists(path2) {
219
299
  return false;
220
300
  }
221
301
  }
222
- var src_default = (options) => {
302
+ async function findDecks({ port }) {
303
+ const decks = await glob.glob("./src/**/deck.mdx");
304
+ return decks.map((deck) => ({
305
+ deckFile: deck,
306
+ deckUrl: `http://localhost:${port}/${deck.replace("src/", "").replace("deck.mdx", "")}`
307
+ }));
308
+ }
309
+ async function fileExists(name, path2) {
310
+ const candidateExts = [".ts", ".tsx", ".js", ".jsx"];
311
+ for await (const ext of candidateExts) {
312
+ const fullPath = `${path2}${ext}`;
313
+ try {
314
+ await fs2.access(fullPath);
315
+ return fullPath.replace(/^\./, "");
316
+ } catch {
317
+ continue;
318
+ }
319
+ }
320
+ }
321
+ async function loadCustomConfig() {
322
+ const layoutsFile = await fileExists("layouts", "./pestacle/layouts");
323
+ return {
324
+ layoutsFile
325
+ };
326
+ }
327
+ var src_default = async (options) => {
328
+ const config = await loadCustomConfig();
329
+ console.log(config);
223
330
  let isProd = false;
224
331
  const deckConfig = {
225
332
  decks: []
226
333
  };
227
334
  return {
228
335
  name: "react-deck",
229
- async config(config) {
336
+ async config(config2) {
230
337
  var _a, _b, _c;
231
338
  const decks = await glob.glob("./src/**/deck.mdx");
232
- const inputs = ((_b = (_a = config.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.input) || {};
339
+ const inputs = ((_b = (_a = config2.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.input) || {};
233
340
  deckConfig.decks = decks.map((deck) => ({
234
341
  originalFile: deck,
235
342
  index: deck.replace("/deck.mdx", "/index.html").replace("src/", "")
@@ -240,18 +347,18 @@ var src_default = (options) => {
240
347
  }, []);
241
348
  const finalInputs = typeof inputs === "string" ? [inputs, ...decks] : Array.isArray(inputs) ? [...inputs, ...decks] : { ...inputs, ...newInputs };
242
349
  return {
243
- ...config,
350
+ ...config2,
244
351
  build: {
245
- ...config.build,
352
+ ...config2.build,
246
353
  rollupOptions: {
247
- ...(_c = config.build) == null ? void 0 : _c.rollupOptions,
354
+ ...(_c = config2.build) == null ? void 0 : _c.rollupOptions,
248
355
  input: finalInputs
249
356
  }
250
357
  }
251
358
  };
252
359
  },
253
- configResolved(config) {
254
- isProd = config.isProduction;
360
+ configResolved(config2) {
361
+ isProd = config2.isProduction;
255
362
  },
256
363
  resolveId(id) {
257
364
  if (deckConfig.decks.some((deck) => deck.index === id)) {
@@ -280,8 +387,11 @@ var src_default = (options) => {
280
387
  return;
281
388
  }
282
389
  const contentIndex = createAppDeckFile({
283
- slidePath: `${directory}/deck.mdx`
390
+ slidePath: `${directory}/deck.mdx`,
391
+ theme: options.theme,
392
+ config
284
393
  });
394
+ console.log({ contentIndex });
285
395
  return contentIndex;
286
396
  }
287
397
  if (!id.endsWith("deck.mdx")) {
@@ -310,6 +420,16 @@ var src_default = (options) => {
310
420
  const deckPath = dir.startsWith(".") ? dir : `.${dir}`;
311
421
  return html.replace("__SCRIPT__", `${deckPath}/__deck.tsx`);
312
422
  }
423
+ },
424
+ configureServer(server) {
425
+ var _a;
426
+ (_a = server.httpServer) == null ? void 0 : _a.once("listening", async () => {
427
+ const port = server.config.server.port || 5173;
428
+ const decks = await findDecks({ port });
429
+ for (const deck of decks) {
430
+ console.log(`Deck available at ${deck.deckUrl}`);
431
+ }
432
+ });
313
433
  }
314
434
  };
315
435
  };
package/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { PluginOption } from "vite";
2
2
  import { ReactDeckOptions } from "./types";
3
- declare const _default: (options: ReactDeckOptions) => PluginOption;
3
+ export { defineConfig } from "./config";
4
+ declare const _default: (options: ReactDeckOptions) => Promise<PluginOption>;
4
5
  export default _default;
package/index.mjs CHANGED
@@ -1,8 +1,15 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __export = (target, all) => {
3
+ for (var name in all)
4
+ __defProp(target, name, { get: all[name], enumerable: true });
5
+ };
6
+
1
7
  // src/index.ts
2
8
  import * as fs2 from "fs/promises";
3
9
 
4
10
  // src/slides.ts
5
11
  import matter from "gray-matter";
12
+ import remarkDirective from "remark-directive";
6
13
  import fs from "fs";
7
14
  import { compile } from "@mdx-js/mdx";
8
15
 
@@ -43,6 +50,20 @@ ${header}
43
50
 
44
51
  // src/slides.ts
45
52
  import remarkGfm from "remark-gfm";
53
+ import { visit } from "unist-util-visit";
54
+ function myRemarkPlugin() {
55
+ return (tree) => {
56
+ visit(tree, (node) => {
57
+ if (node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective") {
58
+ const data = node.data || (node.data = {});
59
+ data.hName = "directive";
60
+ data.hProperties = node.attributes;
61
+ data.hProperties._name = node.name;
62
+ data.hProperties._kind = node.type;
63
+ }
64
+ });
65
+ };
66
+ }
46
67
  async function transformSlidesMdxToReact(sourceContent, {
47
68
  production: isProd,
48
69
  ...options
@@ -76,8 +97,13 @@ ${slide}
76
97
  outputFormat: "program",
77
98
  jsx: !isProd,
78
99
  providerImportSource: "@mdx-js/react",
79
- remarkPlugins: [remarkGfm],
80
- ...options
100
+ ...options,
101
+ remarkPlugins: [
102
+ remarkGfm,
103
+ remarkDirective,
104
+ myRemarkPlugin,
105
+ ...options.remarkPlugins
106
+ ]
81
107
  });
82
108
  const mainCode = extractMainCodeAsChildren(result.value.toString(), {
83
109
  isJsx: !isProd
@@ -144,6 +170,42 @@ function normalizeNewline(input) {
144
170
  return input.replace(new RegExp(CRLF, "g"), "\n");
145
171
  }
146
172
 
173
+ // src/themes/index.ts
174
+ var themes_exports = {};
175
+ __export(themes_exports, {
176
+ green: () => green_exports,
177
+ purple: () => purple_exports
178
+ });
179
+
180
+ // src/themes/green.ts
181
+ var green_exports = {};
182
+ __export(green_exports, {
183
+ themeTokens: () => themeTokens
184
+ });
185
+ var colors = {
186
+ primary: "#FFFFFF",
187
+ secondary: "#F49676",
188
+ tertiary: "#042F3B"
189
+ };
190
+ var themeTokens = {
191
+ colors
192
+ };
193
+
194
+ // src/themes/purple.ts
195
+ var purple_exports = {};
196
+ __export(purple_exports, {
197
+ themeTokens: () => themeTokens2
198
+ });
199
+ var colors2 = {
200
+ //primary: "#56D4F8",
201
+ primary: "#ffffff",
202
+ secondary: "#F530EC",
203
+ tertiary: "#2B135A"
204
+ };
205
+ var themeTokens2 = {
206
+ colors: colors2
207
+ };
208
+
147
209
  // src/helpers.ts
148
210
  function createIndexFile({ entrypoint }) {
149
211
  return `<!DOCTYPE html>
@@ -168,10 +230,19 @@ function createIndexFile({ entrypoint }) {
168
230
  </html>
169
231
  `;
170
232
  }
171
- function createAppDeckFile({ slidePath }) {
233
+ function createAppDeckFile({
234
+ slidePath,
235
+ theme,
236
+ config
237
+ }) {
238
+ if (!themes_exports[theme]) {
239
+ throw new Error(`Theme ${theme} not found`);
240
+ }
241
+ const themeObject = themes_exports[theme];
172
242
  return `import React, { StrictMode } from "react";
173
243
  import * as ReactDOM from "react-dom/client";
174
244
  import { Deck } from '@gpichot/spectacle-deck';
245
+ import layouts from "${config.layoutsFile}";
175
246
 
176
247
  import deck from "${slidePath}";
177
248
 
@@ -180,7 +251,7 @@ const root = ReactDOM.createRoot(
180
251
  );
181
252
  root.render(
182
253
  <StrictMode>
183
- <Deck deck={deck} />
254
+ <Deck deck={deck} theme={${JSON.stringify(themeObject)}} layouts={layouts} />
184
255
  </StrictMode>
185
256
  )`;
186
257
  }
@@ -188,6 +259,22 @@ root.render(
188
259
  // src/index.ts
189
260
  import * as glob from "glob";
190
261
  import path from "path";
262
+
263
+ // src/config.ts
264
+ import _ from "lodash";
265
+
266
+ // src/types.ts
267
+ import { z } from "zod";
268
+ var PestacleConfigSchema = z.object({
269
+ theme: z.enum(["green", "purple"]).default("green")
270
+ });
271
+
272
+ // src/config.ts
273
+ function defineConfig(config) {
274
+ return config;
275
+ }
276
+
277
+ // src/index.ts
191
278
  async function checkIfDirectoryExists(path2) {
192
279
  try {
193
280
  await fs2.access(path2);
@@ -196,17 +283,44 @@ async function checkIfDirectoryExists(path2) {
196
283
  return false;
197
284
  }
198
285
  }
199
- var src_default = (options) => {
286
+ async function findDecks({ port }) {
287
+ const decks = await glob.glob("./src/**/deck.mdx");
288
+ return decks.map((deck) => ({
289
+ deckFile: deck,
290
+ deckUrl: `http://localhost:${port}/${deck.replace("src/", "").replace("deck.mdx", "")}`
291
+ }));
292
+ }
293
+ async function fileExists(name, path2) {
294
+ const candidateExts = [".ts", ".tsx", ".js", ".jsx"];
295
+ for await (const ext of candidateExts) {
296
+ const fullPath = `${path2}${ext}`;
297
+ try {
298
+ await fs2.access(fullPath);
299
+ return fullPath.replace(/^\./, "");
300
+ } catch {
301
+ continue;
302
+ }
303
+ }
304
+ }
305
+ async function loadCustomConfig() {
306
+ const layoutsFile = await fileExists("layouts", "./pestacle/layouts");
307
+ return {
308
+ layoutsFile
309
+ };
310
+ }
311
+ var src_default = async (options) => {
312
+ const config = await loadCustomConfig();
313
+ console.log(config);
200
314
  let isProd = false;
201
315
  const deckConfig = {
202
316
  decks: []
203
317
  };
204
318
  return {
205
319
  name: "react-deck",
206
- async config(config) {
320
+ async config(config2) {
207
321
  var _a, _b, _c;
208
322
  const decks = await glob.glob("./src/**/deck.mdx");
209
- const inputs = ((_b = (_a = config.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.input) || {};
323
+ const inputs = ((_b = (_a = config2.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.input) || {};
210
324
  deckConfig.decks = decks.map((deck) => ({
211
325
  originalFile: deck,
212
326
  index: deck.replace("/deck.mdx", "/index.html").replace("src/", "")
@@ -217,18 +331,18 @@ var src_default = (options) => {
217
331
  }, []);
218
332
  const finalInputs = typeof inputs === "string" ? [inputs, ...decks] : Array.isArray(inputs) ? [...inputs, ...decks] : { ...inputs, ...newInputs };
219
333
  return {
220
- ...config,
334
+ ...config2,
221
335
  build: {
222
- ...config.build,
336
+ ...config2.build,
223
337
  rollupOptions: {
224
- ...(_c = config.build) == null ? void 0 : _c.rollupOptions,
338
+ ...(_c = config2.build) == null ? void 0 : _c.rollupOptions,
225
339
  input: finalInputs
226
340
  }
227
341
  }
228
342
  };
229
343
  },
230
- configResolved(config) {
231
- isProd = config.isProduction;
344
+ configResolved(config2) {
345
+ isProd = config2.isProduction;
232
346
  },
233
347
  resolveId(id) {
234
348
  if (deckConfig.decks.some((deck) => deck.index === id)) {
@@ -257,8 +371,11 @@ var src_default = (options) => {
257
371
  return;
258
372
  }
259
373
  const contentIndex = createAppDeckFile({
260
- slidePath: `${directory}/deck.mdx`
374
+ slidePath: `${directory}/deck.mdx`,
375
+ theme: options.theme,
376
+ config
261
377
  });
378
+ console.log({ contentIndex });
262
379
  return contentIndex;
263
380
  }
264
381
  if (!id.endsWith("deck.mdx")) {
@@ -287,9 +404,20 @@ var src_default = (options) => {
287
404
  const deckPath = dir.startsWith(".") ? dir : `.${dir}`;
288
405
  return html.replace("__SCRIPT__", `${deckPath}/__deck.tsx`);
289
406
  }
407
+ },
408
+ configureServer(server) {
409
+ var _a;
410
+ (_a = server.httpServer) == null ? void 0 : _a.once("listening", async () => {
411
+ const port = server.config.server.port || 5173;
412
+ const decks = await findDecks({ port });
413
+ for (const deck of decks) {
414
+ console.log(`Deck available at ${deck.deckUrl}`);
415
+ }
416
+ });
290
417
  }
291
418
  };
292
419
  };
293
420
  export {
294
- src_default as default
421
+ src_default as default,
422
+ defineConfig
295
423
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-react-deck",
3
- "version": "1.0.8",
3
+ "version": "1.1.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "index.cjs",
@@ -22,11 +22,16 @@
22
22
  "fast refresh"
23
23
  ],
24
24
  "dependencies": {
25
- "@mdx-js/mdx": "^3.0.0",
26
- "@mdx-js/react": "^3.0.0",
27
- "@swc/core": "^1.4.1",
28
- "glob": "^10.3.10",
25
+ "@mdx-js/mdx": "^3.0.1",
26
+ "@mdx-js/react": "^3.0.1",
27
+ "@swc/core": "^1.5.7",
28
+ "glob": "^10.3.15",
29
29
  "gray-matter": "^4.0.3",
30
- "remark-gfm": "^4.0.0"
30
+ "hastscript": "^9.0.0",
31
+ "lodash": "^4.17.21",
32
+ "remark-directive": "^3.0.0",
33
+ "remark-gfm": "^4.0.0",
34
+ "unist-util-visit": "^5.0.0",
35
+ "zod": "^3.23.8"
31
36
  }
32
37
  }
package/slides.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ReactDeckOptions } from "./types";
2
- type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins">;
2
+ type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins" | "remarkPlugins">;
3
3
  /**
4
4
  * Slides are separated by "---" in the markdown file.
5
5
  *
@@ -15,7 +15,7 @@ type CompileOptions = Pick<ReactDeckOptions, "rehypePlugins">;
15
15
  * # Slide 1
16
16
  *
17
17
  * ---
18
- *
18
+ t
19
19
  * layout: slide2
20
20
  *
21
21
  * ---
@@ -0,0 +1,7 @@
1
+ export declare const themeTokens: {
2
+ colors: {
3
+ primary: string;
4
+ secondary: string;
5
+ tertiary: string;
6
+ };
7
+ };
@@ -0,0 +1,2 @@
1
+ export * as green from "./green";
2
+ export * as purple from "./purple";
@@ -0,0 +1,7 @@
1
+ export declare const themeTokens: {
2
+ colors: {
3
+ primary: string;
4
+ secondary: string;
5
+ tertiary: string;
6
+ };
7
+ };
package/types.d.ts CHANGED
@@ -1,3 +1,14 @@
1
- export type ReactDeckOptions = {
1
+ import { z } from "zod";
2
+ export interface ReactDeckOptions {
2
3
  rehypePlugins: any[];
3
- };
4
+ remarkPlugins: any[];
5
+ theme: "green" | "purple";
6
+ }
7
+ export declare const PestacleConfigSchema: z.ZodObject<{
8
+ theme: z.ZodDefault<z.ZodEnum<["green", "purple"]>>;
9
+ }, "strip", z.ZodTypeAny, {
10
+ theme?: "green" | "purple";
11
+ }, {
12
+ theme?: "green" | "purple";
13
+ }>;
14
+ export type PestacleConfig = z.infer<typeof PestacleConfigSchema>;