@symbo.ls/preview 0.0.79 → 0.0.80

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -18,7 +18,6 @@ import { Sync } from './sync' // eslint-disable-line
 smbls.init({ verbose: false, ...SYMBOLS_CONF })
 
 DOM.define({
-  __filepath: param => param,
   $setCollection: smbls.Collection.define.$setCollection,
   $setStateCollection: smbls.Collection.define.$setStateCollection
 })

package/src/pages/Export/const.js

@@ -1,10 +1,10 @@
 'use strict'
 
 import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/scratch'
-import { LIBRARY, COMPONENTS } from '../../../.symbols'
+import { LIBRARY, COMPONENTS } from '../../../.symbols' // eslint-disable-line
 
 const COMPONENT_ROUTES = {}
-LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
+// LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 COMPONENTS.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 
 // const SEQUENCE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 32, 36, 42, 48, 56, 62, 68, 76, 84, 92, 100, 110]

package/src/pages/Export/index.js

@@ -39,8 +39,12 @@ export const Export = {
       const route = window.location.pathname
       const routes = route.slice(1).split('/')
       const componentKey = routes[1]
+      const { COMPONENTS } = state.__system
 
-      const content = COMPONENT_ROUTES[`/${componentKey}`]
+      const content = COMPONENT_ROUTES[`/${componentKey}`] || COMPONENTS[componentKey]
+      console.warn('===content')
+      console.warn(content)
+      console.warn(componentKey, COMPONENTS)
 
       if (content) {
         state.update({

package/src/pages/Library/disabled.js

@@ -0,0 +1,38 @@
+'use strict'
+
+import { ComponentTemplate } from '@symbo.ls/components'
+import { Page, DisabledPage } from '../../components'
+
+import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
+
+export const Library = {
+  extend: [Page, DisabledPage],
+
+  SectionHeader: {
+    title: 'My Symbols',
+    p: 'This is the first collection of your components'
+  },
+
+  Grid: {
+    props: {
+      flex: 1,
+      templateColumns: 'repeat(12, 1fr)',
+      autoFlow: 'dense',
+      autoColumns: 'auto',
+      autoRows: 'auto',
+      justifyItems: 'stretch',
+
+      margin: '- -Z2 B1',
+      gap: 'A'
+    },
+
+    childExtend: ComponentTemplate,
+    $setStateCollection: () => {
+      return new Array(15).fill(void 0).map(v => ({
+        settings: {
+          gridOptions: { colspan: 3, rowspan: 1 }
+        }
+      }))
+    }
+  }
+}

package/src/pages/Library/index.js

@@ -1,12 +1,12 @@
 'use strict'
 
 import { ComponentTemplate } from '@symbo.ls/components'
-import { Page, DisabledPage } from '../../components'
+import { Page } from '../../components'
 
 import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
 
 export const Library = {
-  extend: [Page, DisabledPage],
+  extend: [Page],
 
   SectionHeader: {
     title: 'My Symbols',
@@ -27,12 +27,9 @@ export const Library = {
     },
 
     childExtend: ComponentTemplate,
-    $setStateCollection: () => {
-      return new Array(15).fill(void 0).map(v => ({
-        settings: {
-          gridOptions: { colspan: 3, rowspan: 1 }
-        }
-      }))
+    $setStateCollection: ({ state }) => {
+      const { COMPONENTS } = state.__system
+      return COMPONENTS
     }
   }
 }

package/src/state.js

@@ -10,6 +10,7 @@ export const state = {
 }
 
 state.SYSTEM = USR_DATA[state.appKey]
+state.SYSTEM.COMPONENTS = {}
 
 export const context = {
   LIBRARY,

package/src/sync.js

@@ -1,26 +1,48 @@
 'use strict'
 
-// import { init } from '@symbo.ls/init'
-import { connect, send } from '@symbo.ls/socket/client'
+import { init, connect, send } from 'smbls' // eslint-disable-line no-unused-vars
+import { router } from '@domql/router'
 
 const onChange = (element, state) => {
   return (event, data) => {
-    if (event !== 'live-change') {
-      const obj = JSON.parse(data)
+    // if (event === 'change') {
+    //   const obj = JSON.parse(data)
+    //   state.update({ SYSTEM: obj })
+    // }
+    if (event === 'change') {
+      console.log(data)
+      // const obj = JSON.parse(data)
       state.update({ SYSTEM: data })
     }
+    if (event === 'route') {
+      console.log(data)
+      // const obj = JSON.parse(data)
+      router(element, data, {})
+    }
   }
 }
 
 export const Sync = {
   on: {
     init: (el, s) => {
-      if (s.appKey) connect(s.appKey, onChange(el, s))
+      if (s.appKey) {
+        connect(s.appKey, {
+          source: 'symbols',
+          onChange: onChange(el, s)
+        })
+      }
     },
     stateUpdated: (el, s, changes) => {
       if (s.appKey && changes.SYSTEM) {
-        send(changes.SYSTEM, s.SYSTEM)
-        // init(changes.SYSTEM)
+        const { SYSTEM } = changes
+        send('liveChange', SYSTEM)
+
+        // if (SYSTEM.COLOR && SYSTEM.THEME) {
+        //   init({
+        //     color: SYSTEM.COLOR,
+        //     theme: SYSTEM.THEME
+        //   })
+        // }
       }
     }
   }