refactor: encapsulate minijs properties/methods

Author: jorenrui

lib/entity.js

@@ -2,11 +2,13 @@ import { Lexer } from './generators/lexer'
 import { Events } from './entity/events'
 import { Attributes } from './entity/attributes'
 import { State } from './state'
+import { Mini } from './main'
 
 const IGNORED_IDS = ['$', 'this']
 
 export class Entity {
   constructor(el, dynamicScripts = []) {
+    this.base = new Mini()
     this.element = el
     this.tagName = el.tagName
     this.dynamicScripts = dynamicScripts
@@ -17,9 +19,9 @@ export class Entity {
     this.state = {}
     this.events = new Events(this)
     this.attributes = new Attributes(this)
-    MiniJS.state.addEntity(this)
+    this.base.state.addEntity(this)
 
-    if (MiniJS.debug) this.element.dataset.entityId = this.id
+    if (this.base.debug) this.element.dataset.entityId = this.id
 
     this.attributes.evaluateParent()
   }
@@ -144,14 +146,14 @@ export class Entity {
         this.setAsParent()
 
         if (window[this.id] == null) {
-          window[this.id] = MiniJS.state.create({}, this.id)
+          window[this.id] = this.base.state.create({}, this.id)
         }
 
-        MiniJS.state.addVariable(this.id, this.id)
+        this.base.state.addVariable(this.id, this.id)
 
         if (variable !== 'el') {
           const [_, varName] = variable.split('.')
-          MiniJS.state.addEntityVariable(this.id, varName, this.id)
+          this.base.state.addEntityVariable(this.id, varName, this.id)
         }
       } else if (State.isParentState(variable)) {
         if (!this.parent) this.parent = this.getParent()
@@ -161,26 +163,22 @@ export class Entity {
         if (this.parent == null) return
 
         if (window[this.parent.id] == null) {
-          window[this.parent.id] = MiniJS.state.create({}, this.parent.id)
+          window[this.parent.id] = this.base.state.create({}, this.parent.id)
         }
 
-        MiniJS.state.addVariable(this.parent.id, this.id)
+        this.base.state.addVariable(this.parent.id, this.id)
 
         if (variable !== 'parent') {
           const [_, varName] = variable.split('.')
-          MiniJS.state.addEntityVariable(this.parent.id, varName, this.id)
+          this.base.state.addEntityVariable(this.parent.id, varName, this.id)
         }
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
       } else {
         try {
           const [identifier] = variable.split('.')
-
-          window[identifier] = variable.startsWith('$')
-            ? MiniJS.tryFromLocal(identifier)
-            : window[identifier]
-
-          MiniJS.state.addVariable(identifier, this.id)
+          window[identifier] = this.base.state.getState(identifier)
+          this.base.state.addVariable(identifier, this.id)
         } catch (error) {
           console.error('Failed to initialize variable:', variable, error)
         }
@@ -194,7 +192,7 @@ export class Entity {
 
     if (parentNode == null) return { id: 'EntityDocument' }
 
-    const entities = Array.from(MiniJS.state.entities.values())
+    const entities = Array.from(this.base.state.entities.values())
     const entity = entities.find(
       (e) => e.uuid == parentNode.dataset['mini.uuid']
     )
@@ -209,7 +207,7 @@ export class Entity {
   async init() {
     const isScript = this.element.tagName === 'SCRIPT'
 
-    if (!isScript) await MiniJS.observer.waitForScripts(this.dynamicScripts)
+    if (!isScript) await this.base.observer.waitForScripts(this.dynamicScripts)
 
     this.getVariables()
     this.events.apply()
@@ -258,20 +256,20 @@ export class Entity {
 
   dispose() {
     const elements = [this.element, ...this.element.querySelectorAll('*')]
-    const entities = Array.from(MiniJS.state.entities.values())
+    const entities = Array.from(this.base.state.entities.values())
     const variables = []
 
     // Remove event bindings
     for (const element of elements) {
       if (element.nodeType !== 1) continue
 
-      const entity = MiniJS.state.getEntityByElement(element, entities)
+      const entity = this.base.state.getEntityByElement(element, entities)
 
       if (!entity) continue
 
       variables.push(...entity.variables)
       entity.events.dispose()
-      MiniJS.state.removeEntity(entity)
+      this.base.state.removeEntity(entity)
     }
 
     // Clean up unused variables
@@ -283,6 +281,6 @@ export class Entity {
       (variable) => !usedVariables.includes(variable)
     )
 
-    MiniJS.state.disposeVariables(this.id, unusedVariables)
+    this.base.state.disposeVariables(this.id, unusedVariables)
   }
 }

lib/entity/events.js

@@ -1,5 +1,6 @@
 import { Interpreter } from '../generators/interpreter'
 import { camelToKebabCase } from '../helpers/strings'
+import { Mini } from '../main'
 import { State } from '../state'
 import { EventsExtensions } from './events-extensions'
 
@@ -75,7 +76,8 @@ export class Events {
   }
 
   static applyEvents() {
-    const entities = Array.from(MiniJS.state.entities.values())
+    const mini = new Mini()
+    const entities = Array.from(mini.state.entities.values())
     entities.forEach((entity) => {
       entity.events.apply()
     })
@@ -417,26 +419,29 @@ export class Events {
   }
 
   async evaluate(attr) {
-    const expr = this.base.element.getAttribute(attr)
+    const entity = this.base
+    const mini = entity.base
+
+    const expr = entity.element.getAttribute(attr)
     if (!expr) return
 
-    const elVariables = this.base.variables
+    const elVariables = entity.variables
       .filter((v) => v.startsWith('el.') && v !== 'el')
       .map((v) => v.replace('el.', ''))
-    const variables = this.base.variables.filter((v) => !v.startsWith('el.'))
+    const variables = entity.variables.filter((v) => !v.startsWith('el.'))
 
-    MiniJS.state.attachVariableHelpers(variables)
-    MiniJS.state.attachVariableHelpers(elVariables, this.base.id)
+    mini.state.attachVariableHelpers(variables)
+    mini.state.attachVariableHelpers(elVariables, entity.id)
 
     try {
       await this._interpret(expr)
 
-      MiniJS.state.attachVariableHelpers(variables)
-      MiniJS.state.attachVariableHelpers(elVariables, this.base.id)
+      mini.state.attachVariableHelpers(variables)
+      mini.state.attachVariableHelpers(elVariables, entity.id)
     } catch (error) {
-      if (!this.base.isExists()) return
+      if (!entity.isExists()) return
       console.error(
-        `Failed to evaluate ${attr} for ${this.base.id}:\n\nCode:\n${expr}\n\n`,
+        `Failed to evaluate ${attr} for ${entity.id}:\n\nCode:\n${expr}\n\n`,
         error
       )
     }

lib/generators/interpreter.js

@@ -1,3 +1,4 @@
+import { Mini } from '../main.js'
 import { Lexer } from './lexer.js'
 
 const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
@@ -37,10 +38,11 @@ export class Interpreter extends Lexer {
 
   async interpret(context, _scope = {}) {
     const code = super.output()
+    const mini = new Mini()
 
     const scope = {
       ...DEFAULT_SCOPE,
-      proxyWindow: MiniJS.window,
+      proxyWindow: mini.state.window,
       ..._scope,
     }
 
@@ -61,8 +63,13 @@ export class ClassInterpreter extends Lexer {
 
   async interpret(context, _scope = {}) {
     const classNames = super.conditional()
+    const mini = new Mini()
 
-    const scope = { ...DEFAULT_SCOPE, proxyWindow: MiniJS.window, ..._scope }
+    const scope = {
+      ...DEFAULT_SCOPE,
+      proxyWindow: mini.state.window,
+      ..._scope,
+    }
 
     let newClassNames = [...this._baseClasses]
 

lib/generators/observer.js

@@ -1,5 +1,6 @@
 import { Entity } from '../entity'
 import { Events } from '../entity/events'
+import { Mini } from '../main'
 
 const MutationObserver =
   window.MutationObserver || window.WebKitMutationObserver
@@ -35,7 +36,7 @@ export class Observer {
   static SCRIPT_ID = 'mini.scriptId'
 
   constructor(state) {
-    this.state = state
+    this.base = new Mini()
     this.observer = null
     this.dynamicScripts = new Map()
   }
@@ -47,7 +48,7 @@ export class Observer {
           record.type === 'attributes' &&
           record.attributeName.startsWith(':')
         ) {
-          const entity = this.state.getEntityByElement(record.target)
+          const entity = this.base.state.getEntityByElement(record.target)
           if (!entity) return
 
           const attr = record.attributeName
@@ -58,7 +59,7 @@ export class Observer {
 
         record.removedNodes.forEach((node) => {
           if (node.nodeType !== 1) return
-          const entity = this.state.getEntityByElement(node)
+          const entity = this.base.state.getEntityByElement(node)
           entity?.dispose()
         })
 
@@ -102,7 +103,7 @@ export class Observer {
       script.dataset[Observer.SCRIPT_ID] =
         script.dataset[Observer.SCRIPT_ID] ?? this.generateUUID()
 
-      script.textContent += `\nMiniJS.observer.resolveScript()`
+      script.textContent += `\nMiniJS.resolveScript()`
       if (!this.dynamicScripts.get(script.dataset[Observer.SCRIPT_ID]))
         this.dynamicScripts.set(script.dataset[Observer.SCRIPT_ID], promise)
 
@@ -127,7 +128,7 @@ export class Observer {
 
     delete script.dataset['mini.scriptId']
     script.textContent = script.textContent.replace(
-      '\nMiniJS.observer.resolveScript()',
+      '\nMiniJS.resolveScript()',
       ''
     )
   }