Updated Graph , fixed bugs, refactored and modulorized

doc/README.md

@@ -7,9 +7,9 @@ graph = [{
   id*: Int,
   name*: String,
   type* : String,
+  slot: [['hub', 'sub'], ['','outputs']]
   hub: [...ids],
   sub; [...ids],
-  inputs: [...ids],
   outputs: [...ids]
 }]
 ```
@@ -20,6 +20,7 @@ graph = [{
     "name": "theme_widget",
     "type": "comp",
     "comp": "theme_widget",
+    "slot": [["hub", "sub"], ["inputs"]]
     "hub": [
         "0"
     ],
@@ -39,7 +40,7 @@ graph = [{
 state = [{
   id*: int,
   sub: {
-    component_name: id || [...ids]
+    [...ids]
     .
     .
   }
@@ -51,7 +52,6 @@ state = [{
     "id": "8",
     "comp": "our_contributors",
     "sub": {
-        "content": "15",
         "contributor": [
             "16",
             "17",

src/data.json

@@ -1,5 +1,17 @@
 {
+  "comp": "index",
   "admins": [
     "theme_editor"
-  ]
+  ],
+  "sub": {
+    "theme_widget" : [],
+    "topnav" : [],
+    "header" : [],
+    "datdot" : [],
+    "editor" : [],
+    "smartcontract_codes" : [],
+    "supporters" : [],
+    "our_contributors" : [],
+    "footer" : []
+  }
 }

src/index.js

@@ -32,12 +32,13 @@ async function make_page(opts, lang) {
     inject_all,
   }
   const sdb = statedb()
-  let {admin, sid} = await statedb.init('./d.json')
-  let data = sdb.get(sid)
+  let data = sdb.get(opts.sid)
   if(!data){
-    const {id} = sdb.add(default_data)
+    const {id, sid} = sdb.add({...default_data})
+    opts.sid = sid
     data = {...default_data, id}
   }
+  const admin = sdb.req_access(opts.sid)
   admin.set_admins(data.admins)
   const {send, css_id} = await IO({ id: data.id, name, type: 'comp', comp: name }, on)
   // ----------------------------------------
@@ -65,12 +66,14 @@ async function make_page(opts, lang) {
   </div>`
   const main = shadow.querySelector('div')
 
-  main.append(...await Promise.all(Object.entries(modules).map(async entry => {
-    const el = document.createElement('div')
-    el.id = entry[0]
-    const shadow = el.attachShadow(shopts)
-    shadow.append(await entry[1]({ sid: data.sub[entry[0]]?.[0], hub: [css_id] }))
-    return el
+  main.append(...await Promise.all(
+    Object.entries(data.sub).map(async ([name, sids]) => {
+      console.log(name, sids)
+      const el = document.createElement('div')
+      el.name = name
+      const shadow = el.attachShadow(shopts)
+      shadow.append(await modules[name]({ sid: sids[0], hub: [css_id] }))
+      return el
   })))
   init_css()
   return el
@@ -79,7 +82,7 @@ async function make_page(opts, lang) {
     main.querySelector('#'+data).scrollIntoView({ behavior: 'smooth'})
   }
   async function init_css () {
-    const pref = JSON.parse(localStorage.pref)
+    const pref = JSON.parse(localStorage.pref || '{}')
     const pref_shared = pref[name] || data.shared || [{ id: name }]
     const pref_uniq = pref[css_id] || data.uniq || []
     pref_shared.forEach(async v => inject_all({ data: await get_theme(v)}))