From 8b8c847457a46c3a6e6aabaf83198c0b7c1d3796 Mon Sep 17 00:00:00 2001
From: Jakob Rosenberg <jakobrosenberg@gmail.com>
Date: Thu, 19 Dec 2024 17:36:48 +0100
Subject: [PATCH] feat: theme plugin

---
 lib/buildtime/RoutifyBuildtime.js             |   3 +
 lib/buildtime/plugins/omitFromPath/index.js   |   3 +-
 lib/buildtime/plugins/omitNode/index.js       |  27 +++
 lib/buildtime/plugins/themes/index.js         |  13 ++
 .../spec/example/@_lang/@at/blog/index.svelte |   1 +
 .../spec/example/@_lang/@at/index.svelte      |   1 +
 .../@_lang/@de/@xmas/dexmasonly.svelte        |   1 +
 .../example/@_lang/@de/@xmas/index.svelte     |   1 +
 .../spec/example/@_lang/@de/index.svelte      |   1 +
 .../plugins/themes/spec/example/about.svelte  |   1 +
 .../themes/spec/example/blog/@de/index.svelte |   1 +
 .../themes/spec/example/blog/index.svelte     |   1 +
 .../plugins/themes/spec/example/index.svelte  |   1 +
 .../plugins/themes/spec/themes.test.js        | 187 ++++++++++++++++++
 lib/buildtime/plugins/themes/themes.js        |  92 +++++++++
 lib/buildtime/plugins/themes/utils.js         | 100 ++++++++++
 16 files changed, 433 insertions(+), 1 deletion(-)
 create mode 100644 lib/buildtime/plugins/omitNode/index.js
 create mode 100644 lib/buildtime/plugins/themes/index.js
 create mode 100644 lib/buildtime/plugins/themes/spec/example/@_lang/@at/blog/index.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/@_lang/@at/index.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/dexmasonly.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/index.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/@_lang/@de/index.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/about.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/blog/@de/index.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/blog/index.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/example/index.svelte
 create mode 100644 lib/buildtime/plugins/themes/spec/themes.test.js
 create mode 100644 lib/buildtime/plugins/themes/themes.js
 create mode 100644 lib/buildtime/plugins/themes/utils.js

diff --git a/lib/buildtime/RoutifyBuildtime.js b/lib/buildtime/RoutifyBuildtime.js
index e5240127..27fab2fe 100644
--- a/lib/buildtime/RoutifyBuildtime.js
+++ b/lib/buildtime/RoutifyBuildtime.js
@@ -18,6 +18,7 @@ import { devHelperPlugin } from './plugins/devHelper/helper.js'
 import { metaCapturePlugin } from './plugins/metaCapture/index.js'
 import { log, logs } from './logMsgs.js'
 import { omitDirFromPathPlugin } from './plugins/omitFromPath/index.js'
+import { themesPlugin } from './plugins/themes/index.js'
 
 /** @returns {Partial<RoutifyBuildtimeOptions>} */
 const getDefaults = () => ({
@@ -30,6 +31,7 @@ const getDefaults = () => ({
         resetFiles: ['_reset'],
         fallbackFiles: ['_fallback'],
     },
+    themes: { presets: {} },
     logLevel: 3,
     routesDir: {
         default: 'src/routes',
@@ -48,6 +50,7 @@ const getDefaults = () => ({
         devHelperPlugin,
         metaCapturePlugin,
         omitDirFromPathPlugin,
+        themesPlugin,
     ],
     watch: false,
 })
diff --git a/lib/buildtime/plugins/omitFromPath/index.js b/lib/buildtime/plugins/omitFromPath/index.js
index 25d51531..e97dac76 100644
--- a/lib/buildtime/plugins/omitFromPath/index.js
+++ b/lib/buildtime/plugins/omitFromPath/index.js
@@ -5,7 +5,8 @@ export const omitDirFromPathPlugin = {
     before: 'bundler',
     build: ({ instance }) => {
         // find file names that are enclosed in a parenthesis
-        const omittedDir = node => node.file.name.match(/\(([^)]+)\)/)
+        const omittedDir = node =>
+            node.file.name.startsWith('(') && node.file.name.endsWith(')')
 
         // remove the node and move its children to the parent
         instance.nodeIndex.filter(omittedDir).forEach(node => {
diff --git a/lib/buildtime/plugins/omitNode/index.js b/lib/buildtime/plugins/omitNode/index.js
new file mode 100644
index 00000000..1a7d1a31
--- /dev/null
+++ b/lib/buildtime/plugins/omitNode/index.js
@@ -0,0 +1,27 @@
+/*
+    Always omit
+    <!-- routify:meta omit -->
+
+    Omit in production
+    <!-- routify:meta omit="production" -->
+
+    Omit in multiple environments
+    <!-- routify:meta omit=["production", "staging"]
+ */
+
+const coerceArray = val => (Array.isArray(val) ? val : [val])
+const crossMatch = (a, b) => a.some(x => b.includes(x))
+
+/** @type {RoutifyBuildtimePlugin} */
+export const omitNodePlugin = {
+    name: 'omitNode',
+    after: 'filemapper',
+    before: 'exporter',
+    build: ({ instance }) => {
+        instance.nodeIndex.forEach(node => {
+            const omits = coerceArray(node.meta.omit)
+            const conditions = [process.env.NODE_ENV, true]
+            if (crossMatch(omits, conditions)) node.remove()
+        })
+    },
+}
diff --git a/lib/buildtime/plugins/themes/index.js b/lib/buildtime/plugins/themes/index.js
new file mode 100644
index 00000000..51b62700
--- /dev/null
+++ b/lib/buildtime/plugins/themes/index.js
@@ -0,0 +1,13 @@
+import { themes } from './themes.js'
+
+/**
+ * @type {RoutifyBuildtimePlugin}
+ **/
+export const themesPlugin = {
+    name: 'themesPlugin',
+    after: 'metaFromFile',
+    before: 'exporter',
+    build: async ctx => {
+        themes(ctx)
+    },
+}
diff --git a/lib/buildtime/plugins/themes/spec/example/@_lang/@at/blog/index.svelte b/lib/buildtime/plugins/themes/spec/example/@_lang/@at/blog/index.svelte
new file mode 100644
index 00000000..b26e2051
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/@_lang/@at/blog/index.svelte
@@ -0,0 +1 @@
+@at/blog/index
diff --git a/lib/buildtime/plugins/themes/spec/example/@_lang/@at/index.svelte b/lib/buildtime/plugins/themes/spec/example/@_lang/@at/index.svelte
new file mode 100644
index 00000000..bff31028
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/@_lang/@at/index.svelte
@@ -0,0 +1 @@
+austrian index
diff --git a/lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/dexmasonly.svelte b/lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/dexmasonly.svelte
new file mode 100644
index 00000000..db571d22
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/dexmasonly.svelte
@@ -0,0 +1 @@
+german xmas only index
diff --git a/lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/index.svelte b/lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/index.svelte
new file mode 100644
index 00000000..872c4a19
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas/index.svelte
@@ -0,0 +1 @@
+german xmas index
diff --git a/lib/buildtime/plugins/themes/spec/example/@_lang/@de/index.svelte b/lib/buildtime/plugins/themes/spec/example/@_lang/@de/index.svelte
new file mode 100644
index 00000000..406857de
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/@_lang/@de/index.svelte
@@ -0,0 +1 @@
+german index
diff --git a/lib/buildtime/plugins/themes/spec/example/about.svelte b/lib/buildtime/plugins/themes/spec/example/about.svelte
new file mode 100644
index 00000000..1ecdcea7
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/about.svelte
@@ -0,0 +1 @@
+english about
diff --git a/lib/buildtime/plugins/themes/spec/example/blog/@de/index.svelte b/lib/buildtime/plugins/themes/spec/example/blog/@de/index.svelte
new file mode 100644
index 00000000..331a5f13
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/blog/@de/index.svelte
@@ -0,0 +1 @@
+blog/@de/index
diff --git a/lib/buildtime/plugins/themes/spec/example/blog/index.svelte b/lib/buildtime/plugins/themes/spec/example/blog/index.svelte
new file mode 100644
index 00000000..25f0b8ba
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/blog/index.svelte
@@ -0,0 +1 @@
+blog index
diff --git a/lib/buildtime/plugins/themes/spec/example/index.svelte b/lib/buildtime/plugins/themes/spec/example/index.svelte
new file mode 100644
index 00000000..6976121f
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/example/index.svelte
@@ -0,0 +1 @@
+english index
diff --git a/lib/buildtime/plugins/themes/spec/themes.test.js b/lib/buildtime/plugins/themes/spec/themes.test.js
new file mode 100644
index 00000000..119df55a
--- /dev/null
+++ b/lib/buildtime/plugins/themes/spec/themes.test.js
@@ -0,0 +1,187 @@
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+import fse from 'fs-extra'
+import { filemapper } from '../../../../buildtime/plugins/filemapper/lib/index.js'
+import { RoutifyBuildtime } from '../../../../buildtime/RoutifyBuildtime.js'
+import { themes } from '../themes.js'
+import { normalizeConfig, normalizePreset } from '../utils.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const options = {
+    routifyDir: `${__dirname}/temp`,
+    routesDir: { default: `${__dirname}/example` },
+}
+
+beforeEach(() => {
+    fse.emptyDirSync(options.routifyDir)
+})
+
+describe('theme config', () => {
+    test('presets', () => {
+        const defaultPreset = {
+            preferences: [],
+            namespaces: [/^@_/],
+            rootNodes: [],
+        }
+        test('can handle shorthand ', () => {
+            const input = [['de', 'xmas'], 'de']
+            const expected = {
+                rootNodes: [],
+                namespaces: [/^@_/],
+                preferences: [['de', 'xmas'], ['de']],
+            }
+
+            const normalizedPreset = normalizePreset(input, defaultPreset)
+            expect(normalizedPreset).toEqual(expected)
+        })
+
+        test('can handle full preset', () => {
+            const input = {
+                preferences: [['de', 'xmas'], ['de']],
+                namespaces: ['foo'],
+                rootNodes: ['blog'],
+            }
+
+            const normalizedPreset = normalizePreset(input, defaultPreset)
+            expect(normalizedPreset).toEqual(input)
+        })
+    })
+    test('config', () => {
+        test('no defaults', () => {
+            const input = { presets: { at: [['at', 'xmas'], 'at'] } }
+
+            const normalizedConfig = normalizeConfig(input, [])
+            expect(normalizedConfig).toEqual({
+                presets: {
+                    at: {
+                        rootNodes: [],
+                        namespaces: [/^@_/],
+                        preferences: [['at', 'xmas'], ['at']],
+                    },
+                },
+                defaults: {
+                    file: 'en',
+                    app: 'en',
+                    namespaces: [/^@_/],
+                    rootNodes: [],
+                },
+            })
+        })
+        test('with defaults', () => {
+            const input = {
+                presets: { at: [['at', 'xmas'], 'at'] },
+                defaults: { file: 'de', namespaces: ['foo'] },
+            }
+
+            const normalizedConfig = normalizeConfig(input, [])
+            expect(normalizedConfig).toEqual({
+                presets: {
+                    at: {
+                        rootNodes: [],
+                        namespaces: ['foo'],
+                        preferences: [['at', 'xmas'], ['at']],
+                    },
+                },
+                defaults: {
+                    file: 'de',
+                    app: 'en',
+                    namespaces: ['foo'],
+                    rootNodes: [],
+                },
+            })
+        })
+    })
+})
+
+describe('themes', async () => {
+    const themeConfig = {
+        presets: {
+            'at-xmas': [['at', 'xmas'], ['de', 'xmas'], 'at', 'de', ['en', 'xmas'], 'en'],
+            at: ['at', 'de', 'en'],
+            'de-xmas': [['de', 'xmas'], 'de', ['en', 'xmas'], 'en'],
+            de: ['de', 'en'],
+            'en-xmas': [['en', 'xmas'], 'en'],
+            en: ['en'],
+        },
+    }
+    const instance = new RoutifyBuildtime({ ...options, themes: themeConfig })
+    await filemapper({ instance })
+    await themes({ instance })
+
+    test('creates themed root nodes', () => {
+        // Object.entries(instance.rootNodes).forEach(([name, rootNode]) => {
+        //     console.log('THEME: ' + name)
+        //     // console.log(rootNode)
+        //     visualNodeTree(rootNode)
+        // })
+        expect(instance.rootNodes['default-theme-at-xmas']).toBeTruthy()
+        expect(instance.rootNodes['default-theme-de-xmas']).toBeTruthy()
+        expect(instance.rootNodes['default-theme-en-xmas']).toBeTruthy()
+        expect(instance.rootNodes['default-theme-at']).toBeTruthy()
+        expect(instance.rootNodes['default-theme-de']).toBeTruthy()
+        expect(instance.rootNodes['default-theme-en']).toBeTruthy()
+        expect(instance.rootNodes['default']).toBeTruthy()
+    })
+
+    test('can have nested folders in a theme', () => {
+        const node = instance.rootNodes['default-theme-at-xmas'].traverse('/blog/index')
+        expect(node).toBeTruthy()
+        expect(node.id).toBe('_default___lang__at_blog_index_svelte')
+        expect(node.file.dir).toEqual(
+            'lib/buildtime/plugins/themes/spec/example/@_lang/@at/blog',
+        )
+    })
+
+    test('themes can be nested in folders', () => {
+        const node = instance.rootNodes['default-theme-de-xmas'].traverse('/blog/index')
+        expect(node).toBeTruthy()
+        expect(node.id).toBe('_default_blog__de_index_svelte')
+        expect(node.file.dir).toEqual(
+            'lib/buildtime/plugins/themes/spec/example/blog/@de',
+        )
+    })
+
+    test('themes can have precedence', () => {
+        const indexNode = instance.rootNodes['default-theme-at-xmas'].traverse('/index')
+        expect(indexNode.file.dir).toEqual(
+            'lib/buildtime/plugins/themes/spec/example/@_lang/@de/@xmas',
+        )
+
+        const blogNode =
+            instance.rootNodes['default-theme-at-xmas'].traverse('/blog/index')
+        expect(blogNode.file.dir).toEqual(
+            'lib/buildtime/plugins/themes/spec/example/@_lang/@at/blog',
+        )
+    })
+
+    test('unwanted themes are excluded', () => {
+        const yes = instance.rootNodes['default-theme-de-xmas'].traverse('/dexmasonly')
+        const no = instance.rootNodes['default-theme-de'].traverse('/dexmasonly', {
+            silent: true,
+        })
+        expect(yes).toBeTruthy()
+        expect(no).toBeFalsy()
+    })
+})
+
+describe('themes can be built', async () => {
+    const themeConfig = {
+        presets: {
+            'at-xmas': [['at', 'xmas'], ['de', 'xmas'], 'at', 'de', ['en', 'xmas'], 'en'],
+            at: ['at', 'de', 'en'],
+            'de-xmas': [['de', 'xmas'], 'de', ['en', 'xmas'], 'en'],
+            de: ['de', 'en'],
+            'en-xmas': [['en', 'xmas'], 'en'],
+            en: ['en'],
+        },
+    }
+    const instance = new RoutifyBuildtime({ ...options, themes: themeConfig })
+    await instance.build()
+})
+
+const visualNodeTree = (node, depth = 0) => {
+    const indent = '  '.repeat(depth)
+    console.log(`${indent}${node.name} - ${node.meta.__themesPlugin_themes?.join(', ')}`)
+    node.children.forEach(child => visualNodeTree(child, depth + 1))
+}
diff --git a/lib/buildtime/plugins/themes/themes.js b/lib/buildtime/plugins/themes/themes.js
new file mode 100644
index 00000000..766478b8
--- /dev/null
+++ b/lib/buildtime/plugins/themes/themes.js
@@ -0,0 +1,92 @@
+import { coerceArray, arraysAreEqual, normalizeConfig } from './utils.js'
+
+export const themes = async ({ instance }) => {
+    const config = normalizeConfig(
+        instance.options.themes,
+        Object.keys(instance.rootNodes),
+    )
+    createThemedRootNodes(instance, config)
+}
+
+/**
+ * @param {RoutifyBuildtime} instance
+ * @param {import('./utils.js').ThemeConfig} config
+ */
+export const createThemedRootNodes = (instance, config) => {
+    // remove theme folders
+    instance.nodeIndex = instance.nodeIndex.filter(node => !node.name.startsWith('@'))
+    // tag nodes
+    instance.nodeIndex.forEach(tagNodeThemes)
+
+    Object.entries(config.presets).forEach(([name, themePreset]) => {
+        themePreset.rootNodes.forEach(rootNodeName => {
+            createThemedRootNode(instance, name, themePreset.preferences, rootNodeName)
+        })
+    })
+
+    // clean up meta props
+    instance.nodeIndex.forEach(node => {
+        delete node.meta.__themesPlugin_themes
+        delete node.meta.__themesPlugin_parentPath
+    })
+}
+
+/**
+ *
+ * @param {RoutifyBuildtime} instance
+ * @param {(string[]|string)[]} themePreferenceGroups
+ */
+export const createThemedRootNode = (
+    instance,
+    name,
+    themePreferenceGroups,
+    rootNodeName,
+) => {
+    const rootNode = instance.rootNodes[rootNodeName].deepClone()
+    rootNode.name = name
+    rootNode.id = '_' + name
+    rootNode.rootName = rootNodeName + '-theme-' + name
+    instance.rootNodes[rootNodeName + '-theme-' + name] = rootNode
+    ;[...themePreferenceGroups].reverse().forEach(themePreferenceGroup => {
+        themePreferenceGroup = coerceArray(themePreferenceGroup)
+        instance.nodeIndex
+            .filter(node => nodeMatchesThemes(node, themePreferenceGroup))
+            .forEach(copyNodeToTheme(rootNode))
+    })
+    // return rootNodes
+}
+
+export const nodeMatchesThemes = (node, themes) =>
+    node.meta.__themesPlugin_themes &&
+    arraysAreEqual(node.meta.__themesPlugin_themes, themes)
+
+export const copyNodeToTheme = rootNode => node =>
+    copyNode(node, rootNode, node.meta.__themesPlugin_parentPath || '/')
+
+/**
+ * @param {RNode} node
+ * @param {string} location
+ */
+export const copyNode = (node, rootNode, location = '/') => {
+    const newNode = node.clone()
+    const parent = rootNode.traverse(location)
+    // remove existing node
+    parent.children.find(child => child.name === newNode.name)?.remove()
+
+    parent.appendChild(newNode)
+}
+
+/**
+ * @param {RNode} node
+ */
+export const tagNodeThemes = node => {
+    const allTags = [...node.ancestors].reverse().map(a => a.name)
+
+    const themes = allTags
+        .filter(tag => tag.startsWith('@') && !tag.startsWith('@_'))
+        .map(tag => tag.slice(1))
+    const path = allTags.filter(tag => !tag.startsWith('@')).join('/')
+    node.meta.__themesPlugin_themes = themes
+    node.meta.__themesPlugin_parentPath = path
+    // node.meta.__themesPlugin_selfPath = (path + '/' + node.name).replace(/\/+/, '/')
+}
diff --git a/lib/buildtime/plugins/themes/utils.js b/lib/buildtime/plugins/themes/utils.js
new file mode 100644
index 00000000..c2de935c
--- /dev/null
+++ b/lib/buildtime/plugins/themes/utils.js
@@ -0,0 +1,100 @@
+/**
+ * @typedef {(string[]|string)[]} ThemeUserHierarchy
+ * A flexible input format where each theme combination can be:
+ * - An array of strings (e.g., ['de', 'xmas'])
+ * - A single string (e.g., 'de')
+ */
+
+/**
+ * @typedef {string[][]} ThemeHierarchy
+ * A normalized format where every theme combination is an array of strings.
+ * Example: [['de', 'xmas'], ['en', 'xmas'], ['de']]
+ */
+
+/**
+ * @typedef {Object} ThemeUserPresetObject
+ * @property {ThemeUserHierarchy} preferences - The user-defined hierarchy for themes.
+ * @property {string[]} [namespaces] - Optional. Namespaces to override global ones.
+ * @property {string[]} [rootNodes] - Optional. Root nodes the preset applies to.
+ */
+
+/**
+ * @typedef {ThemeUserHierarchy|ThemeUserPresetObject} ThemeUserPreset
+ */
+
+/**
+ * @typedef {Object} ThemePreset
+ * @property {ThemeHierarchy} preferences - The normalized hierarchy for themes.
+ * @property {string[]} namespaces - Optional. Namespaces overriding global ones.
+ * @property {string[]} rootNodes - Optional. Root nodes this preset applies to.
+ */
+
+/**
+ * @typedef {Partial<ThemeConfigDefaults>} ThemeUserConfigDefaults
+ */
+
+/**
+ * @typedef {Object} ThemeConfigDefaults
+ * @property {string} file - Optional. The default theme to assign a file without a theme.
+ * @property {string} app - Optional. The default theme to use in the app.
+ * @property {string} namespace - Optional. The default namespace for all presets.
+ * @property {string[]} rootNodes - Optional. The default root nodes for all presets.
+ */
+
+/**
+ * @typedef {Object} ThemeUserConfig
+ * @property {Object<string, ThemeUserPreset>} presets - The user-defined theme presets.
+ * @property {ThemeUserConfigDefaults} [defaults] - Optional. Additional themes to merge with presets.
+ */
+
+/**
+ * @typedef {Object} ThemeConfig
+ * @property {Object<string, ThemePreset>} presets
+ * @property {ThemeConfigDefaults} defaults
+ */
+
+const configDefaults = {
+    defaults: {
+        file: 'en',
+        app: 'en',
+        namespaces: [/^@_/],
+        rootNodes: [],
+    },
+    presets: {},
+}
+
+export const normalizePreset = (preset, defaultPreset) => {
+    const _preset = { ...defaultPreset }
+    if (Array.isArray(preset)) _preset.preferences = [...preset]
+    else Object.assign(_preset, preset)
+    _preset.preferences = _preset.preferences.map(coerceArray)
+    return _preset
+}
+
+/**
+ *
+ * @param {ThemeUserConfig} config
+ * @param {Object<string, any>} rootNodes
+ * @returns
+ */
+export const normalizeConfig = (config, rootNodes) => {
+    const _config = { ...configDefaults, ...config }
+    _config.defaults = { ...configDefaults.defaults, ...config.defaults }
+
+    const defaultPreset = {
+        preferences: [],
+        namespaces: _config.defaults.namespaces,
+        rootNodes,
+    }
+
+    Object.keys(_config.presets).forEach(
+        key =>
+            (_config.presets[key] = normalizePreset(_config.presets[key], defaultPreset)),
+    )
+    return _config
+}
+
+export const coerceArray = value => (Array.isArray(value) ? value : [value])
+
+export const arraysAreEqual = (a, b) =>
+    a.length === b.length && a.every((v, i) => v === b[i])