update

smtdfc · Apr 7, 2024 · 53255de · 53255de
1 parent 1d52106
commit 53255de
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 90 deletions.
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -1,4 +1,4 @@
-import {terser} from '@rollup/plugin-terser';
+import terser from '@rollup/plugin-terser';
 export default {
   input: "./src/turtle.js",
   output: [

diff --git a/src/component/index.js b/src/component/index.js
@@ -1,6 +1,6 @@
 import { render } from '../dom/render.js';
 import { createState } from './state.js';
-
+import {TurtleComponentInstance} from './instance.js';
 function evalInScope(js, contextAsScope) {
   return new Function(`return ${js}`).call(contextAsScope);
 }
@@ -22,92 +22,6 @@ class TurtleComponentElement extends HTMLElement {
 
 window.customElements.define("turtle-component", TurtleComponentElement)
 
-export class TurtleComponentInstance {
-  constructor(fn, props) {
-    this.fn = fn
-    this.props = props
-    this.data = {}
-    this._memories = {}
-    this._refs = {}
-    this._element = null
-    this._reactive = true
-    this.html = render.bind(this)
-    this.onCreate = new Function()
-    this.onRender = new Function()
-    this.onUpdate = new Function()
-    this.onDestroy = new Function()
-  }
-
-  get refs() {
-    return this._refs
-  }
-
-  initState(value) {
-    let state = createState(value)
-    state.component = this
-    return state
-  }
-
-  addUpdateDependents(dependents) {
-    dependents.forEach(dependent => {
-      dependent.component = this
-    })
-  }
-
-  forceUpdate() {
-    for (let i = 0; i < this._memories.length; i++) {
-      let d = this._memories[i]
-      if (d.type == "attr") {
-        d.node.setAttribute(
-          d.attr,
-          evalInScope(d.expr, this)
-        )
-      }
-
-      if (d.type == "text") {
-        d.node.textContent = evalInScope(d.expr, this)
-      }
-
-      if (d.type == "html") {
-        d.node.innerHTML = evalInScope(d.expr, this)
-      }
-    }
-    this.onUpdate()
-  }
-
-  start(element) {
-    this._element = element
-    let { root, context } = this.requestRender()
-    this._element.appendChild(root)
-    this._memories = context._memories
-    this._refs = context._refs
-
-    for (let i = 0; i < this._memories.length; i++) {
-      let d = this._memories[i]
-      if (d.type == "attr") {
-        d.node.setAttribute(
-          d.attr,
-          evalInScope(d.expr, this)
-        )
-      }
-
-      if (d.type == "text") {
-        d.node.textContent = evalInScope(d.expr, this)
-      }
-
-      if (d.type == "html") {
-        d.node.innerHTML = evalInScope(d.expr, this)
-      }
-    }
-
-    this.onRender()
-  }
-
-  requestRender() {
-    return this.fn.bind(this)(this, ...this.props)
-  }
-
-}
 export class TurtleComponent extends TurtleComponentInstance{
 
 }

diff --git a/src/component/instance.js b/src/component/instance.js
@@ -0,0 +1,86 @@
+export class TurtleComponentInstance {
+  constructor(fn, props) {
+    this.fn = fn
+    this.props = props
+    this.data = {}
+    this._memories = {}
+    this._refs = {}
+    this._element = null
+    this._reactive = true
+    this.html = render.bind(this)
+    this.onCreate = new Function()
+    this.onRender = new Function()
+    this.onUpdate = new Function()
+    this.onDestroy = new Function()
+  }
+
+  get refs() {
+    return this._refs
+  }
+
+  initState(value) {
+    let state = createState(value)
+    state.component = this
+    return state
+  }
+
+  addUpdateDependents(dependents) {
+    dependents.forEach(dependent => {
+      dependent.component = this
+    })
+  }
+
+  forceUpdate() {
+    for (let i = 0; i < this._memories.length; i++) {
+      let d = this._memories[i]
+      if (d.type == "attr") {
+        d.node.setAttribute(
+          d.attr,
+          evalInScope(d.expr, this)
+        )
+      }
+
+      if (d.type == "text") {
+        d.node.textContent = evalInScope(d.expr, this)
+      }
+
+      if (d.type == "html") {
+        d.node.innerHTML = evalInScope(d.expr, this)
+      }
+    }
+    this.onUpdate()
+  }
+
+  start(element) {
+    this._element = element
+    let { root, context } = this.requestRender()
+    this._element.appendChild(root)
+    this._memories = context._memories
+    this._refs = context._refs
+
+    for (let i = 0; i < this._memories.length; i++) {
+      let d = this._memories[i]
+      if (d.type == "attr") {
+        d.node.setAttribute(
+          d.attr,
+          evalInScope(d.expr, this)
+        )
+      }
+
+      if (d.type == "text") {
+        d.node.textContent = evalInScope(d.expr, this)
+      }
+
+      if (d.type == "html") {
+        d.node.innerHTML = evalInScope(d.expr, this)
+      }
+    }
+
+    this.onRender()
+  }
+
+  requestRender() {
+    return this.fn.bind(this)(this, ...this.props)
+  }
+
+}
diff --git a/src/component/state.js b/src/component/state.js
@@ -1,4 +1,4 @@
-import { TurtleComponentInstance } from './index.js';
+import {TurtleComponentInstance} from './instance.js';
 
 class TurtleComponentState {
   constructor(component, value) {

diff --git a/src/dom/render.js b/src/dom/render.js
@@ -1,4 +1,5 @@
-import { TurtleComponentInstance,TurtleComponent } from '../component/index.js';
+import { TurtleComponentInstance } from '../component/instance.js';
+import { TurtleComponent } from '../component/index.js';
 import { TurtleMemorizeContext } from './memorize.js';
 import { parserContent } from './parser.js';
 import { processAttributes } from './attributes.js';