@morphemecms/cms 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @morphemecms/cms
 
+## 0.7.1
+
+### Patch Changes
+
+- 36e2e3b: Fix the Cloudflare build stopping with "Too many open files" by serving all Material Symbols icons as one module.
+
 ## 0.7.0
 
 ### Minor Changes

package/lib/licenses.mjs

@@ -428,7 +428,7 @@ const HELPERS = [
   [/^\0vite\//, 'vite'],
   [/^\0rolldown\//, 'rolldown'],
 ];
-const OWN_VIRTUAL = [/^\0virtual:(app-folders|all-icons)$/, /^\0site-theme-icons?(:|$)/];
+const OWN_VIRTUAL = [/^\0virtual:(app-folders|all-icons|material-symbols)$/, /^\0site-theme-icons?(:|$)/];
 
 /** An app or a theme as licensesIntegration takes it: its kind and id, its name, version and who made it, its manifest
  * (its defineApp or its theme.json, with `license` and `thirdParty`), its folder, and whether the site is built with it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Morpheme CMS: the editor for a site built with Astro, its screens, its blocks and the rules a site gives it. See README.md.",
   "license": "MIT",
   "author": "Lars Adolfsen",

package/site/materialSymbols.d.mts

@@ -1,5 +1,11 @@
-/** The module's source: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`, the keys as
- * import.meta.glob names them (src/materialIcons.ts). With `ssr` false: an empty object. */
+/** All Outlined files as text, read one at a time: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`,
+ * the keys as import.meta.glob named them. `dir` is the URL or the path of the outlined/ folder. */
+export function materialFiles(dir: any): {};
+/** The module's source: `export default` of all the files (materialFiles). */
+export function materialModule(): string;
+/** The SSR module's source: the same as materialModule. With `ssr` false: an empty object. */
 export function materialSsrModule(ssr: any): string;
+/** The virtual module's id as imported (src/materialIcons.ts). */
+export const MATERIAL_ALL: "virtual:material-symbols";
 /** The virtual module's id as imported (packages/editor/src/icon.tsx). */
 export const MATERIAL_SSR: "virtual:material-symbols-ssr";

package/site/materialSymbols.mjs

@@ -1,19 +1,35 @@
-// The Material Symbols (Outlined) files as the module `virtual:material-symbols-ssr`, answered by themePlugin (theme.mjs):
-// all of them as text on the server render (so a backup icon, icon.tsx, is in the built page's HTML at once), nothing in the browser
-// (where src/materialIcons.ts is the one lazy chunk). Exposes MATERIAL_SSR and materialSsrModule(). Reads @material-symbols/svg-400.
+// The Material Symbols (Outlined) files as two modules answered by themePlugin (theme.mjs): `virtual:material-symbols` (all of them
+// as text, for the one lazy chunk of src/materialIcons.ts) and `virtual:material-symbols-ssr` (all of them on the server render, so
+// a backup icon, icon.tsx, is in the built page's HTML at once; `{}` in the browser). Files are read one at a time, never globbed
+// (7,874 open files at once stops Cloudflare's build with EMFILE). Exposes MATERIAL_ALL, MATERIAL_SSR, materialFiles, materialModule,
+// materialSsrModule. Reads @material-symbols/svg-400.
 import { readdirSync, readFileSync } from 'node:fs';
 import { pathToFileURL } from 'node:url';
 
+/** The virtual module's id as imported (src/materialIcons.ts). */
+export const MATERIAL_ALL = 'virtual:material-symbols';
 /** The virtual module's id as imported (packages/editor/src/icon.tsx). */
 export const MATERIAL_SSR = 'virtual:material-symbols-ssr';
 
-/** The module's source: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`, the keys as
- * import.meta.glob names them (src/materialIcons.ts). With `ssr` false: an empty object. */
-export function materialSsrModule(ssr) {
-  if (!ssr) return 'export default {};';
-  const dir = new URL('node_modules/@material-symbols/svg-400/outlined/', pathToFileURL(`${process.cwd()}/`));
+const PREFIX = '/node_modules/@material-symbols/svg-400/outlined/';
+
+/** All Outlined files as text, read one at a time: `{ '/node_modules/@material-symbols/svg-400/outlined/<name>.svg': '<svg …>' }`,
+ * the keys as import.meta.glob named them. `dir` is the URL or the path of the outlined/ folder. */
+export function materialFiles(dir) {
+  const base = dir instanceof URL ? dir : pathToFileURL(`${String(dir).replace(/[\/]+$/, '')}/`);
   const files = {};
-  for (const name of readdirSync(dir))
-    if (name.endsWith('.svg')) files[`/node_modules/@material-symbols/svg-400/outlined/${name}`] = readFileSync(new URL(name, dir), 'utf8');
-  return `export default ${JSON.stringify(files)};`;
+  for (const name of readdirSync(base).sort()) if (name.endsWith('.svg')) files[PREFIX + name] = readFileSync(new URL(name, base), 'utf8');
+  return files;
+}
+
+const outlined = () => new URL(`node_modules/@material-symbols/svg-400/outlined/`, pathToFileURL(`${process.cwd()}/`));
+
+/** The module's source: `export default` of all the files (materialFiles). */
+export function materialModule() {
+  return `export default ${JSON.stringify(materialFiles(outlined()))};`;
+}
+
+/** The SSR module's source: the same as materialModule. With `ssr` false: an empty object. */
+export function materialSsrModule(ssr) {
+  return ssr ? materialModule() : 'export default {};';
 }

package/site/materialSymbols.test.mjs

@@ -0,0 +1,44 @@
+// Tests of materialFiles, materialModule and materialSsrModule (site/materialSymbols.mjs): the Material Symbols files as one module.
+// Run with `node --test site/materialSymbols.test.mjs`.
+import { strict as assert } from 'node:assert';
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test } from 'node:test';
+import { materialFiles, materialModule, materialSsrModule } from './materialSymbols.mjs';
+
+const PREFIX = '/node_modules/@material-symbols/svg-400/outlined/';
+const A = '<svg viewBox="0 0 1 1"><path d="A"/></svg>';
+const B = '<svg viewBox="0 0 2 2"><path d="B"/></svg>';
+
+const folder = mkdtempSync(join(tmpdir(), 'material-'));
+const dir = join(folder, 'node_modules/@material-symbols/svg-400/outlined');
+mkdirSync(dir, { recursive: true });
+writeFileSync(join(dir, 'b.svg'), B);
+writeFileSync(join(dir, 'a.svg'), A);
+writeFileSync(join(dir, 'c.txt'), 'not an icon');
+
+test('one key per svg file, sorted, with the file text', () => {
+  assert.deepEqual(materialFiles(dir), { [`${PREFIX}a.svg`]: A, [`${PREFIX}b.svg`]: B });
+  assert.deepEqual(Object.keys(materialFiles(dir)), [`${PREFIX}a.svg`, `${PREFIX}b.svg`]);
+});
+
+test('a file that is not an svg has no key', () => {
+  assert.ok(!Object.keys(materialFiles(dir)).some((k) => k.endsWith('c.txt')));
+});
+
+test('the module source parses to the same object as materialFiles', () => {
+  const cwd = process.cwd();
+  process.chdir(folder);
+  try {
+    const code = materialModule();
+    assert.ok(code.startsWith('export default '));
+    assert.deepEqual(JSON.parse(code.slice('export default '.length, -1)), materialFiles(dir));
+  } finally {
+    process.chdir(cwd);
+  }
+});
+
+test('without ssr the SSR module is an empty object', () => {
+  assert.equal(materialSsrModule(false), 'export default {};');
+});

package/site/theme.mjs

@@ -11,7 +11,7 @@ import { fileURLToPath, pathToFileURL } from 'node:url';
 import { svgParts } from '@morphemecms/cms/lib/svg.mjs';
 import { declarationProblems, ownerId } from '@morphemecms/cms/lib/licenses.mjs';
 import { installedPacks, isIconName, packFolder, packProblems, phosphorFile, svgProblems, usedIcons } from './icons.mjs';
-import { MATERIAL_SSR, materialSsrModule } from './materialSymbols.mjs';
+import { MATERIAL_ALL, MATERIAL_SSR, materialModule, materialSsrModule } from './materialSymbols.mjs';
 import { ICON_PACK_FILE, ICON_PACK_LICENSE, SYSTEM_PACKS, THEME_PACKS_FOLDER, packInUse, packTheme, themePackId } from './iconPacks.mjs';
 import { MOTION_SCHEMES } from '@morphemecms/cms/lib/motion-schemes.mjs';
 import { storeImportProblems } from './storeTheme.mjs';
@@ -227,6 +227,7 @@ const PHOSPHOR_REACT = '@phosphor-icons/react';
 const PHOSPHOR_FILE = /@phosphor-icons\/core\/assets\/(?:regular|fill)\/([a-z0-9-]+)\.svg\?raw$/;
 const REACT_ICONS = '\0site-theme-icons';
 const FILE_ICON = '\0site-theme-icon:';
+const MATERIAL_ALL_ID = `\0${MATERIAL_ALL}`;
 const MATERIAL_SSR_ID = `\0${MATERIAL_SSR}`;
 
 /** The React component's name of a Phosphor icon by its file's name (`caret-right` → CaretRight), when Phosphor has it. */
@@ -471,6 +472,7 @@ export function themePlugin() {
       // The theme's icons import Phosphor's own.
       if (source === PHOSPHOR_REACT) return own && importer !== REACT_ICONS ? REACT_ICONS : null;
       if (source === ALL_ICONS) return '\0' + ALL_ICONS;
+      if (source === MATERIAL_ALL) return MATERIAL_ALL_ID;
       if (source === MATERIAL_SSR) return MATERIAL_SSR_ID;
       const icon = source.match(PHOSPHOR_FILE)?.[1];
       if (icon) return svgParts(icons[icon]) ? FILE_ICON + icon : null;
@@ -485,6 +487,7 @@ export function themePlugin() {
       return null;
     },
     load(id, options) {
+      if (id === MATERIAL_ALL_ID) return materialModule();
       if (id === MATERIAL_SSR_ID) return materialSsrModule(options?.ssr);
       if (id === REACT_ICONS) return reactIcons(icons);
       if (id === '\0' + ALL_ICONS)

package/src/materialIcons.ts

@@ -1,8 +1,6 @@
 // All of Material Symbols (Outlined, regular and filled) as text, by their file, for the icons icon.tsx draws that are not on
-// its list: one lazy chunk, loaded in the browser the first time one is drawn (the server render has them from
-// virtual:material-symbols-ssr instead, packages/editor/site/materialSymbols.mjs). Imported by icon.tsx only dynamically.
-export const materialIcons = import.meta.glob<string>('/node_modules/@material-symbols/svg-400/outlined/*.svg', {
-  query: '?raw',
-  import: 'default',
-  eager: true,
-});
+// its list: one lazy chunk, loaded in the browser the first time one is drawn. The set comes from virtual:material-symbols
+// (packages/editor/site/materialSymbols.mjs), one module read file by file. Imported by icon.tsx only dynamically.
+import all from 'virtual:material-symbols';
+
+export const materialIcons: Record<string, string> = all;

package/src/virtual.d.ts

@@ -1,3 +1,8 @@
+declare module 'virtual:material-symbols' {
+  const files: Record<string, string>;
+  export default files;
+}
+
 declare module 'virtual:material-symbols-ssr' {
   const files: Record<string, string>;
   export default files;

package/starter/package.json

@@ -32,7 +32,7 @@
     "@material-symbols/svg-400": "0.48.2",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.7.0",
+    "@morphemecms/cms": "0.7.1",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",