feat: allow extenstion from another preset

Author: darlanalves

assets/wds.png

@@ -10,11 +10,11 @@
     <div class="editor">
       <div id="editor" class="editor__content"></div>
       <div class="editor__toolbar">
-        <div class="logger flex-grow" id="output"></div>
         <input type="checkbox" data-action="autosave" />
         <button class="btn btn-primary" data-action="save">Save</button>
         <button class="btn btn-secondary" data-action="compile">Compile</button>
       </div>
+      <div class="logger flex-grow" id="output"></div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.js"></script>
 
@@ -41,6 +41,7 @@
         const editor = monaco.editor.create(document.getElementById("editor"), {
           value: source.ok ? await source.text() : "",
           language: "yaml",
+          automaticLayout: true,
         });
 
         const save = () =>

assets/wds.svg

@@ -53,15 +53,20 @@ async function savePreset(args, request, response) {
   const input = await readStream(request);
   const name = sanitise(args[0]);
 
-  if (name && input) {
+  try {
+    if (!(name && input)) {
+      throw new Error("Missing name or input.\nPOST /update/:name");
+    }
+
+    Yaml.parse(input);
     const inputPath = join(CWD, "systems", name + ".yml");
     await ensureFolder(dirname(inputPath));
     await writeFile(inputPath, input, "utf-8");
-    console.log("Updated " + name);
-    response.end(input);
-  } else {
+    response.end("OK");
+  } catch (error) {
+    console.log('Failed to update' + name, error);
     response.writeHead(400);
-    response.end("Missing name or input.\nPOST /update/:name");
+    response.end(String(error));
   }
 }
 
@@ -91,15 +96,15 @@ async function getPreset(args, response) {
 
 async function compilePreset(args, response) {
   const name = sanitise(args[0]);
-  const path = join(CWD, "systems", name + ".yml");
+  const preset = await loadPreset(name);
 
-  if (!existsSync(path)) {
+  if (!preset) {
     return notFound(response);
   }
 
-  console.log("Generating " + name + " from " + path);
-  const input = await readFile(path, "utf-8");
-  const json = Yaml.parse(input);
+  const start = Date.now();
+  console.log("Generating " + name);
+  const json = await loadChain(preset);
   const output = await generatePreset(json, response);
 
   if (output.error) {
@@ -110,7 +115,6 @@ async function compilePreset(args, response) {
   }
 
   const { config, definitions, map, css } = output;
-  // TODO sanitize name
   const basePath = join(CWD, "presets", name);
   await writeFile(basePath + ".conf.cjs", config);
   await writeFile(basePath + ".mjs", definitions);
@@ -147,10 +151,51 @@ async function generate(request, response) {
   }
 }
 
+/**
+ * @param {String} name
+ * @returns {Promise<object|null>} preset
+ */
+async function loadPreset(name) {
+  const path = join(CWD, "systems", name + ".yml");
+
+  if (!existsSync(path)) {
+    return null;
+  }
+
+  const input = await readFile(path, "utf-8");
+  return Yaml.parse(input);
+}
+
+/**
+ * @param {object} preset
+ * @returns {Promise<object>} preset chain
+ */
+async function loadChain(preset) {
+  if (!preset.extend) {
+    return preset;
+  }
+
+  const next = await loadPreset(preset.extend);
+  preset.preset = [next, ...(preset.preset || [])].filter(Boolean);
+
+  if (next?.extend) {
+    await loadChain(next);
+  }
+
+  return preset;
+}
+
+/**
+ * @param {String} input
+ */
 function sanitise(input) {
   return String(input).replace(/[.]{2,}/g, ".");
 }
 
+/**
+ * @param {Object} input
+ * @returns {Promise<String>}
+ */
 function readStream(input) {
   return new Promise((resolve) => {
     const chunks = [];

editor.html

@@ -7,17 +7,22 @@ import { defaultPlugins, allPlugins } from './constants.mjs';
 const commentSeparator = '//';
 const definitionSeparator = ':';
 
-const transformPlugins = (list) => list.flatMap(next => {
-  if (next.endsWith('*')) {
-    const stem = next.slice(0, -1);
-    return allPlugins.filter(p => p.startsWith(stem));
-  }
-
-  return next;
-});
+const transformPlugins = (list) =>
+  !Array.isArray(list) ?
+  [] :
+  list.flatMap(next => {
+    if (next.endsWith('*')) {
+      const stem = next.slice(0, -1);
+      return allPlugins.filter(p => p.startsWith(stem));
+    }
+
+    return next;
+  });
 
 function transformText(input) {
-  if (!input) return undefined;
+  if (!input) {
+    return undefined;
+  }
 
   const source =
     typeof input === 'string'
@@ -39,15 +44,14 @@ function transformText(input) {
 }
 
 function parseDefinitions(definitions) {
-  const { sizes, colors, spacing, devices, radius } = definitions;
+  const { sizes, colors, spacing, devices } = definitions;
 
   return {
     ...definitions,
     sizes: transformText(sizes),
     colors: transformText(colors),
     spacing: transformText(spacing),
     devices: transformText(devices),
-    borderRadius: transformText(radius),
   };
 }
 
@@ -114,17 +118,19 @@ ${componentDefinitions}
 }
 
 export function generateConfig(definitions) {
-  const { borderRadius, colors, devices, spacing, plugins, extend = {} } = definitions;
+  const { borderRadius, colors, devices, spacing, plugins, preset, variants = {}, theme = {} } = definitions;
 
   return {
+    ...(Array.isArray(preset) && { preset: preset.map(generateConfig) } || {}),
     corePlugins: transformPlugins(plugins || defaultPlugins),
     theme: {
       screens: generateScreens(devices),
       colors: generateColors(colors),
       borderRadius,
       spacing,
-      extend,
+      ...theme,
     },
+    variants
   };
 }
 
@@ -144,7 +150,6 @@ export async function generatePreset(definitions) {
     return {
       error: null,
       css: output.css,
-      map: output.map?.toString() || '',
       config,
       definitions: json,
     };