Sync

.gitignore

@@ -1,3 +1,4 @@
 .vscode
 *.pdf
-node_modules
+node_modules
+*.py

src/components/card-big-image.js

@@ -26,5 +26,5 @@ const cardCode = `
 </div>
 `
 
-const cardBuilder = new ComponentBuilder(cardCode, 'card-big-image')
+const cardBuilder = new ComponentBuilder('card-big-image', cardCode)
 cardBuilder.build()

src/components/card-small-image.js

@@ -24,5 +24,5 @@ const cardCode = `
 </div>
 `
 
-const cardBuilder = new ComponentBuilder(cardCode, 'card-small-image')
+const cardBuilder = new ComponentBuilder('card-small-image', cardCode)
 cardBuilder.build()

src/components/component-builder.js

@@ -1,84 +1,83 @@
-const errorCompStyle = `border: 1px solid red;
-padding: 10px; display: flex;
-flex-direction: column;
-align-items: center;
-justify-content: center;
-max-width: fit-content;
-margin: 0 auto;
-margin-top: 1rem;
-border-radius: 5px;`
-
 class Component {
-    componentCode = ''
-    scriptElement = null
-    props = {}
-    errors = []
-
-    constructor(componentCode, scriptElement) {
+    constructor(componentSpawnElement, componentName, componentCode, onMount) {
         this.componentCode = componentCode
-        this.scriptElement = scriptElement
+        this.componentSpawnElement = componentSpawnElement
+        this.onMount = onMount
+        this.componentName = componentName
+
+        this.props = {}
+        this.errors = []
+        this.buildInProps = []
 
+        this.generateBuildInProps()
         this.collectProps()
-        this.insertProps()
+        this.validateProps()
+        if (this.errors.length > 0) return
+
+        this.totalProps = { ...this.buildInProps, ...this.props }
+        console.table(this.totalProps)
+    }
+
+    generateBuildInProps() {
+        this.buildInProps = {
+            'component-name': this.componentName,
+            'component-code': this.componentCode,
+            'component-props': JSON.stringify(this.props),
+            'component-unique-id': crypto.randomUUID(),
+        }
     }
 
     collectProps() {
-        const attributes = this.scriptElement.attributes
+        const attributes = this.componentSpawnElement.attributes
         for (let i = 0; i < attributes.length; i++) {
             const attr = attributes[i]
-            if (attr.name.startsWith('data-')) {
+            if (
+                attr.name.startsWith('data-') &&
+                attr.name !== 'data-component' // do not collect the data-component of old syntax
+            ) {
                 const prop = attr.name.replace('data-', '')
                 this.props[prop] = attr.value
             }
         }
+    }
 
-        // Check for missing required props in the component code
-        const requiredProps = [
-            ...this.componentCode.matchAll(/{{(.*?)}}/g),
-        ].map((match) => match[1])
+    validateProps() {
+        const requiredProps = new Set(
+            [...this.componentCode.matchAll(/{{(.*?)}}/g)].map(
+                (match) => match[1]
+            )
+        )
+
+        Object.keys(this.props).forEach((prop) => {
+            if (!requiredProps.has(prop)) {
+                this.errors.push(
+                    `Property <mark>${prop}</mark> is not recognized by the component.`
+                )
+                delete this.props[prop]
+            }
+        })
 
         requiredProps.forEach((prop) => {
             if (!(prop in this.props)) {
                 this.errors.push(
                     `Property <mark>${prop}</mark> is required but not provided.`
                 )
-                this.props[prop] = null
+                delete this.props[prop]
             }
         })
-
-        // Check for unexpected props in the component code
-        const unexpectedProps = Object.keys(this.props).filter(
-            (prop) => !requiredProps.includes(prop)
-        )
-
-        unexpectedProps.forEach((prop) => {
-            if (prop === 'component') return // Ignore the component name
-            this.errors.push(
-                `Property <mark>${prop}</mark> is not recognized by the component.`
-            )
-            delete this.props[prop]
-        })
     }
 
     insertProps() {
-        if (this.errors.length > 0) {
-            // Build error component
-            this.componentCode = `
-                <div style="${errorCompStyle}">
-                    <h2 style="color: red">Component Error</h2>
-                    <h3 style="color: yellow">${this.props.component}</h3>
-                    <div style="color: grey;">
-                        <ul>
-                        ${this.errors
-                            .map((error) => `<li>${error}</li>`)
-                            .join('')}
-                        </ul>
-                    </div>
-                <div>
-            `
-            return
+        // Replace internal props ||name||
+        for (const [prop, value] of Object.entries(this.buildInProps)) {
+            const internalPropRegex = new RegExp(`\\|\\|${prop}\\|\\|`, 'g')
+            this.componentCode = this.componentCode.replace(
+                internalPropRegex,
+                value || ''
+            )
         }
 
+        // Replace custom props {{name}}
         for (const [prop, value] of Object.entries(this.props)) {
             const propRegex = new RegExp(`{{${prop}}}`, 'g')
             this.componentCode = this.componentCode.replace(
@@ -88,42 +87,107 @@ class Component {
         }
     }
 
-    placeComponent() {
-        if (this.errors.length > 0) {
-            console.error('Invalid component. Cannot place component.')
-            this.errors.forEach((error) => console.error(error))
-        }
-
+    buildComponent() {
         const template = document.createElement('template')
         template.innerHTML = this.componentCode.trim()
 
         const content = template.content.cloneNode(true)
-        this.scriptElement.replaceWith(content)
+        this.componentSpawnElement.replaceWith(content)
+    }
+
+    generateErrorComponent() {
+        console.error('Invalid component. Cannot place component.')
+        this.errors.forEach((error) => console.error(error))
+
+        this.componentCode = `
+        <div style="border: 1px solid red;
+        padding: 10px; display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: fit-content;
+        margin: 0 auto;
+        border-radius: 5px;">
+            <h2 style="color: red">Component Error</h2>
+            <h3 style="color: yellow">${this.componentName}</h3>
+            <div style="color: grey;">
+                <ul>
+                ${this.errors.map((error) => `<li>${error}</li>`).join('')}
+                </ul>
+            </div>
+        <div>
+    `
+    }
+
+    async onMountPerfWrapper() {
+        try {
+            var startTime = performance.now()
+            await this.onMount(this.totalProps)
+        } catch (e) {
+            console.error('Error: onMount function failed')
+            console.error(e)
+        } finally {
+            console.info('OnMount ran in', performance.now() - startTime, 'ms')
+        }
+    }
+
+    async placeComponent() {
+        if (this.errors.length > 0) {
+            this.generateErrorComponent()
+        } else {
+            this.insertProps()
+        }
+
+        this.buildComponent()
+
+        if (this.onMount === undefined || this.errors.length > 0) return
+        await this.onMountPerfWrapper()
     }
 }
 
 export default class ComponentBuilder {
-    constructor(code, name) {
-        this.name = name
+    constructor(componentName, code, onMount = undefined) {
+        this.componentName = componentName
         this.code = code
+        this.onMount = onMount
     }
 
-    build() {
-        document
-            .querySelectorAll(`script[data-component="${this.name}"]`)
-            .forEach((scriptTag) => {
-                const startTime = performance.now()
+    async build() {
+        const oldSyntax = `script[data-component="${this.componentName}"]`
+        const newSyntax = `${this.componentName}`
 
-                const comp = new Component(this.code, scriptTag)
-                comp.placeComponent()
+        const componentTags = [
+            ...document.querySelectorAll(oldSyntax),
+            ...document.querySelectorAll(newSyntax),
+        ]
 
-                console.log(
-                    `Component "${comp.props['component']}" rendered in ${
-                        performance.now() - startTime
-                    }ms`
-                )
+        console.log(componentTags)
+
+        const startTimes = new Map() // To track start times for each component
+
+        // Convert NodeList to Array and map to promises for parallel processing
+        const promises = Array.from(componentTags).map(async (componentTag) => {
+            const startTime = performance.now()
+            startTimes.set(componentTag, startTime)
+
+            const comp = new Component(
+                componentTag,
+                this.componentName,
+                this.code,
+                this.onMount
+            )
+            await comp.placeComponent()
+
+            console.info(
+                `Component "${comp.componentName}" rendered in ${
+                    performance.now() - startTime
+                }ms`
+            )
+            return comp
+        })
 
-                console.table(comp.props)
-            })
+        // Wait for all components to render
+        await Promise.all(promises)
+        console.info(`All components of ${this.componentName} rendered.`)
     }
 }