add homepage

Author: Nick-Mazuk

image-preprocess.cjs

@@ -0,0 +1,117 @@
+svelte = require('svelte/compiler')
+
+/**
+ * @typedef Options
+ * @property {{ [tag: string]: string[] }} tags
+ */
+
+/**
+ * @typedef {import('svelte/types/compiler/interfaces').TemplateNode} TemplateNode
+ */
+
+/**
+ * @param {Options} [options]
+ * @returns {import('svelte/types/compiler/preprocess/types').PreprocessorGroup}
+ */
+function imagePreprocess(options = {}) {
+    const imports = {}
+    const tags = options.tags || {
+        img: ['src', 'srcset', 'data-src', 'data-srcset'],
+        source: ['src', 'srcset', 'data-src', 'data-srcset'],
+    }
+    return {
+        markup: ({ content, filename }) => {
+            const preparedContent = content
+                .replace(/<style[^>]*>[\w\W]+<\/style>/g, (match) => ' '.repeat(match.length))
+                .replace(/<script[^>]*>[\w\W]+<\/script>/g, (match) => ' '.repeat(match.length))
+            let ast
+            try {
+                ast = svelte.parse(preparedContent)
+            } catch (e) {
+                console.error(e, 'Error parsing content')
+                return
+            }
+
+            /** @type {TemplateNode[]} */
+            const matches = []
+            svelte.walk(ast, {
+                enter: (node) => {
+                    if (!['Element', 'Fragment', 'InlineComponent'].includes(node.type)) {
+                        return
+                    }
+
+                    if (tags[node.name]) {
+                        matches.push({ node, attributes: tags[node.name] })
+                    }
+                },
+            })
+
+            const dependencies = []
+            const code = matches.reduce(
+                /**
+                 * @param {{content: string, offset: number}} processed
+                 * @param {{node: TemplateNode, attributes: string[]} match
+                 * @param {number} index
+                 */
+                (processed, match, index) => {
+                    const attributes = (match.node.attributes || []).filter(
+                        (a) => a.type === 'Attribute' && match.attributes.includes(a.name)
+                    )
+                    if (
+                        attributes.length === 0 ||
+                        (match.node.attributes || []).find(
+                            (a) => a.name === 'rel' && a.value[0].data === 'external'
+                        )
+                    ) {
+                        return processed
+                    }
+
+                    let { content, offset } = processed
+
+                    for (const attribute of attributes) {
+                        if (attribute.value[0]?.type === 'Text') {
+                            const value = attribute.value[0]
+                            if (value.data.startsWith('http')) continue
+
+                            const symbol = `__IMAGE_${index}__`
+                            const replacement = `{${symbol}}`
+
+                            if (!imports[filename]) imports[filename] = {}
+                            imports[filename][symbol] = value.data
+
+                            dependencies.push(value.data)
+
+                            content =
+                                content.substring(0, value.start + offset) +
+                                replacement +
+                                content.substring(value.end + offset)
+
+                            offset += replacement.length - value.data.length
+                        }
+                    }
+                    return { content, offset }
+                },
+                { content, offset: 0 }
+            ).content
+
+            return { code, dependencies }
+        },
+        script: ({ content, attributes, filename }) => {
+            if (!attributes.context) {
+                const localImports = Object.entries(imports[filename] || {})
+                if (localImports.length > 0) {
+                    const dependencies = localImports.map(([symbol, path]) => path)
+                    const code =
+                        localImports
+                            .map(([symbol, path]) => `import ${symbol} from "${path}"`)
+                            .join('\n') +
+                        '\n' +
+                        content
+                    return { code, dependencies }
+                }
+            }
+        },
+    }
+}
+
+module.exports = imagePreprocess

package.json

@@ -37,7 +37,8 @@
         "svelte-preprocess": "^4.7.3",
         "tailwindcss": "^2.2.7",
         "tslib": "^2.0.0",
-        "typescript": "^4.2.4"
+        "typescript": "^4.2.4",
+        "vite-imagetools": "^3.6.8"
     },
     "dependencies": {
         "@nick-mazuk/lib": "^0.8.54",