Merge pull request #629 from processing/fix/hydrated-components

Use import.meta.env + ENV file so hydrated components work

Author: davepagurek

src/components/GridItem/Reference.astro

@@ -20,7 +20,7 @@ const { item } = Astro.props;
   </p>
   <p class="text-sm mt-xxs">
     {
-      `${item.data.description.replace(/<[^>]*>/g, "").split(/(\.|。)(\s|$)/, 1)[0]}.`
+      `${item.data.description?.replace(/<[^>]*>/g, "").split(/(\.|。)(\s|$)/, 1)[0]}.`
     }
   </p>
 </a>

src/content/reference/config.ts

@@ -25,7 +25,7 @@ export const categories = [
 
 const paramSchema = z.object({
   name: z.string(),
-  description: z.string(),
+  description: z.string().optional(),
   type: z.string().optional(),
   optional: z.coerce.boolean().optional(),
 });
@@ -60,10 +60,10 @@ export const referenceSchema = z.object({
   // Name of the reference item
   title: z.string(),
   // Module this item is within (for example: Color)
-  module: z.string(),
+  module: z.string().optional().default('Shape'),
   submodule: z.string().optional(),
   file: z.string(),
-  description: z.string(),
+  description: z.string().optional(),
   line: z.number().or(z.string().transform((v) => parseInt(v, 10))),
   params: z.array(paramSchema).optional(),
   overloads: z.array(z.object({ params: z.array(paramSchema) })).optional(),

src/globals/globals.ts

@@ -14,8 +14,8 @@ export const sketchesPerPage = 12 as const;
 export const eventsPerPage = 12 as const;
 
 export const cdnLibraryUrl =
-  process.env.P5_LIBRARY_PATH ||
-  `https://cdn.jsdelivr.net/npm/p5@${p5Version}/lib/p5.min.js` as const;
+  import.meta.env.PUBLIC_P5_LIBRARY_PATH ||
+  (`https://cdn.jsdelivr.net/npm/p5@${p5Version}/lib/p5.min.js` as const);
 export const fullDownloadUrl =
   `https://github.com/processing/p5.js/releases/download/v${p5Version}/p5.zip` as const;
 export const libraryDownloadUrl =

src/scripts/branchTest.ts

@@ -1,5 +1,5 @@
 import { execSync } from "child_process";
-import { existsSync, rmSync } from "fs";
+import { existsSync, readFileSync, rmSync, writeFileSync } from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 
@@ -17,7 +17,16 @@ if (!match) {
 const repoUrl = match[1];
 const branch = match[2];
 
-const env = `P5_LIBRARY_PATH='/p5.min.js' P5_REPO_URL='${repoUrl}' P5_BRANCH='${branch}'`;
+const envVars = [`PUBLIC_P5_LIBRARY_PATH='/p5.min.js'`, `P5_REPO_URL='${repoUrl}'`, `P5_BRANCH='${branch}'`];
+const env = envVars.join(' ');
+
+const envFilePath = path.join(__dirname, '../../.env');
+let currentEnv = existsSync(envFilePath) ? readFileSync(envFilePath).toString() : '';
+currentEnv = currentEnv
+  .split('\n')
+  .filter((line: string) => !line.startsWith('P5_') && !line.startsWith('PUBLIC_P5_'))
+  .join('\n')
+writeFileSync(envFilePath, currentEnv + '\n' + envVars.join('\n'));
 
 // First delete the existing cloned p5 to make sure we clone fresh
 const parsedP5Path = path.join(__dirname, "./parsers/in/p5.js/");

src/scripts/resetBranchTest.ts

@@ -1,15 +1,27 @@
 import { fileURLToPath } from "url";
 import path from "path";
-import { existsSync, rmSync } from "fs";
+import { existsSync, readFileSync, rmSync, writeFileSync } from "fs";
 import simpleGit from "simple-git";
 
 async function main() {
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-  const referencePath = path.join(__dirname, '../content/reference/');
+  const referencePath = path.join(__dirname, '../content/reference/en/');
   const dataPath = path.join(__dirname, '../../public/reference/data.json')
   rmSync(referencePath, { recursive: true });
 
+  const envFilePath = path.join(__dirname, '../../.env');
+  if (existsSync(envFilePath)) {
+    const currentEnv = readFileSync(envFilePath).toString();
+    writeFileSync(
+      envFilePath,
+      currentEnv
+        .split('\n')
+        .filter((line: string) => !line.startsWith('P5_') && !line.startsWith('PUBLIC_P5_'))
+        .join('\n')
+    );
+  }
+
   const git = simpleGit();
   await git.checkout('HEAD', [referencePath, dataPath]);