@weaverse/react 0.1.7 → 0.1.8

package/dist/sdk-react.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdk-react.cjs.production.min.js","sources":["../src/utils/index.ts","../src/core.ts","../src/elements/button.tsx","../src/elements/base.tsx","../src/elements/index.ts","../src/index.tsx"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\nimport fetch from 'isomorphic-unfetch'\nimport {isBrowser} from './utils'\n\n\nexport interface ProjectDataItemType {\n\ttype: string\n\tname: string\n\tid: string | number\n}\n\nexport interface ProjectDataType {\n\titems: ProjectDataItemType[]\n}\n\n// const isSheetAccessible = (sheet: CSSStyleSheet) => {\n// \tif (sheet.href && !sheet.href.startsWith(location.origin)) {\n// \t\treturn false\n// \t}\n//\n// \ttry {\n// \t\tsheet.cssRules\n// \t\treturn true\n// \t} catch (e) {\n// \t\treturn false\n// \t}\n// }\n\n// export class WeaverseStyle {\n// \tpublic styleSheets: StyleSheetList\n// \tpublic document: Document\n//\n// \tconstructor(root: Document) {\n// \t\tthis.document = root\n// \t\tthis.styleSheets = this.document.styleSheets\n// \t}\n//\n// \t// Create styleSheet instance that work both on client and server side\n// \tcreateSheet = (root?: Document) => {\n// \t\tlet sheetInstance: any = null\n//\n// \t\tconst reset = () => {\n// \t\t\tconst sheets = Object(root).styleSheets || []\n// \t\t\t// iterate all stylesheets until a hydratable stylesheet is found\n// \t\t\tfor (const sheet of sheets) {\n// \t\t\t\tif (!isSheetAccessible(sheet)) continue\n//\n// \t\t\t\tfor (let index = 0, rules = sheet.cssRules; rules[index]; ++index) {\n// \t\t\t\t\t// /** @type {CSSStyleRule} Possible indicator rule. */\n// \t\t\t\t\tconst check = Object(rules[index])\n// \t\t\t\t\tif (check.selectorText && check.selectorText.includes('@media')) {\n// \t\t\t\t\t\tif (!sheetInstance) sheetInstance = {sheet, reset, rules: sheet.cssRules}\n// \t\t\t\t\t\tbreak\n// \t\t\t\t\t}\n//\n// \t\t\t\t}\n//\n// \t\t\t\t// if a hydratable stylesheet is found, stop looking\n// \t\t\t\tif (sheetInstance) break\n// \t\t\t}\n// \t\t\t// if no hydratable stylesheet is found\n// \t\t\tif (!sheetInstance) {\n// \t\t\t\tconst createCSSMediaRule = (sourceCssText: string) => {\n// \t\t\t\t\tlet rule: any = {\n// \t\t\t\t\t\tcssRules: [],\n// \t\t\t\t\t\tinsertRule(cssText: string, index: number) {\n// \t\t\t\t\t\t\tthis.cssRules.splice(index, 0, createCSSMediaRule(cssText))\n// \t\t\t\t\t\t},\n// \t\t\t\t\t\tget cssText() {\n// \t\t\t\t\t\t\treturn sourceCssText === '@media{}' ? `@media{${[].map.call(this.cssRules, (cssRule: any) => cssRule.cssText).join('')}}` : sourceCssText\n// \t\t\t\t\t\t}\n// \t\t\t\t\t}\n// \t\t\t\t\treturn rule\n// \t\t\t\t}\n//\n// \t\t\t\tsheetInstance = {\n// \t\t\t\t\tsheet: root ? (root.head || root).appendChild(root.createElement('style')).sheet : createCSSMediaRule(''),\n// \t\t\t\t\trules: {},\n// \t\t\t\t\treset,\n// \t\t\t\t\ttoString() {\n// \t\t\t\t\t\tconst {cssRules} = sheetInstance.sheet\n// \t\t\t\t\t\treturn [].map\n// \t\t\t\t\t\t\t.call(cssRules, (cssMediaRule: CSSMediaRule, cssRuleIndex) => {\n// \t\t\t\t\t\t\t\tconst {cssText} = cssMediaRule\n//\n// \t\t\t\t\t\t\t\tlet lastRuleCssText = ''\n// \t\t\t\t\t\t\t\tif (cssRules[cssRuleIndex - 1]) {\n// \t\t\t\t\t\t\t\t\tif (!cssMediaRule.cssRules.length) return ''\n//\n// \t\t\t\t\t\t\t\t\tfor (const name in sheetInstance.rules) {\n// \t\t\t\t\t\t\t\t\t\tif (sheetInstance.rules[name].group === cssMediaRule) {\n// \t\t\t\t\t\t\t\t\t\t\treturn `--sxs{--sxs:${[...sheetInstance.rules[name].cache].join(' ')}}${cssText}`\n// \t\t\t\t\t\t\t\t\t\t}\n// \t\t\t\t\t\t\t\t\t}\n//\n// \t\t\t\t\t\t\t\t\treturn cssMediaRule.cssRules.length ? `${lastRuleCssText}${cssText}` : ''\n// \t\t\t\t\t\t\t\t}\n//\n// \t\t\t\t\t\t\t\treturn cssText\n// \t\t\t\t\t\t\t})\n// \t\t\t\t\t\t\t.join('')\n// \t\t\t\t\t}\n// \t\t\t\t}\n// \t\t\t}\n// \t\t}\n//\n// \t}\n//\n// }\n\nexport type WeaverseType = {\n\t[key: string]: any\n\tappUrl?: string,\n\tprojectKey?: string,\n\tprojectData?: ProjectDataType\n}\n\nexport class Weaverse {\n\telementInstances = new Map<string, any>()\n\titemInstances = new Map<string | number, WeaverseItemStore>()\n\tappUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n\tprojectKey: string = ''\n\tprojectData: ProjectDataType = {\n\t\titems: []\n\t}\n\tlisteners: Set<any> = new Set()\n\tisEditor = false\n\tcurrentFrameSubscription: any\n\n\tconstructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n\t\tthis.appUrl = appUrl || this.appUrl\n\t\tthis.projectKey = projectKey || this.projectKey\n\t\tprojectData && (this.projectData = projectData)\n\t\tthis.init()\n\t}\n\n\tregisterElement(name: string, element: any) {\n\t\tthis.elementInstances.set(name, element)\n\t}\n\n\tinit() {\n\t\tthis.subscribeMessageEvent()\n\t}\n\n\tsubscribe(fn: any) {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe(fn: any) {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate() {\n\t\tthis.listeners.forEach(fn => fn())\n\t\tthis.triggerEditorUpdate()\n\t}\n\n\tfetchProjectData() {\n\t\treturn fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json())\n\t}\n\n\tupdateProjectData() {\n\t\tif (this.projectKey) {\n\t\t\tthis.fetchProjectData().then(data => {\n\t\t\t\tif (data) {\n\t\t\t\t\tthis.projectData = data\n\t\t\t\t\tthis.initItemData()\n\t\t\t\t\tthis.triggerUpdate()\n\t\t\t\t}\n\t\t\t}).catch(err => {\n\t\t\t\tconsole.error(err)\n\t\t\t})\n\t\t}\n\t}\n\n\tsubscribeMessageEvent() {\n\t\tif (typeof this.currentFrameSubscription === 'function') {\n\t\t\tthis.currentFrameSubscription()\n\t\t}\n\t\tisBrowser && window.addEventListener('message', this.handleMessageEvent)\n\t\tthis.currentFrameSubscription = () => {\n\t\t\tisBrowser && window.removeEventListener('message', this.handleMessageEvent)\n\t\t}\n\t\treturn this.currentFrameSubscription\n\t}\n\n\ttriggerEditorUpdate(type = 'weaverse.workspace.init') {\n\t\tif (this.isEditor) {\n\t\t\twindow.top?.postMessage({\n\t\t\t\ttype, payload: {\n\t\t\t\t\tprojectKey: this.projectKey,\n\t\t\t\t\tprojectData: this.projectData\n\t\t\t\t}\n\t\t\t}, '*')\n\t\t}\n\t}\n\n\thandleMessageEvent = (e: MessageEvent) => {\n\t\tif (e.data?.type?.startsWith('weaverse.')) {\n\t\t\tlet type = e.data.type\n\t\t\tswitch (type) {\n\t\t\t\tcase 'weaverse.editor.ready':\n\t\t\t\t\tthis.isEditor = true\n\t\t\t\t\tbreak\n\t\t\t\tcase 'weaverse.editor.update':\n\t\t\t\t\tlet {payload} = e.data\n\t\t\t\t\tlet {itemId, background} = payload\n\t\t\t\t\tlet instance = this.itemInstances.get(itemId)\n\t\t\t\t\tif (instance) {\n\t\t\t\t\t\tinstance.setData({\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\tbackground\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tinitItemData() {\n\t\tlet data = this.projectData\n\t\tif (data.items) {\n\t\t\tdata.items.forEach(item => {\n\t\t\t\tlet itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n\t\t\t\tthis.itemInstances.set(item.id, itemStore)\n\t\t\t})\n\t\t}\n\t}\n}\n\nexport class WeaverseItemStore {\n\tdata: any = {}\n\tlisteners: Set<any> = new Set()\n\tComponent: any\n\n\tconstructor(itemData: any = {}, weaverse: Weaverse) {\n\t\tthis.data = itemData\n\t\tlet {type} = itemData\n\t\tif (type) {\n\t\t\tthis.Component = weaverse.elementInstances.get(type)\n\t\t}\n\t}\n\n\tsetData = (data: any) => {\n\t\tthis.data = Object.assign(this.data, data)\n\t\tthis.triggerUpdate()\n\t}\n\n\tsubscribe = (fn: any) => {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe = (fn: any) => {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate = () => {\n\t\tthis.listeners.forEach(fn => {\n\t\t\treturn fn(this.data)\n\t\t})\n\t}\n\n\n\n\t// addItem(item: any) {\n\t// \tthis.items.push(item)\n\t// \tthis.triggerUpdate()\n\t// }\n\t//\n\t// removeItem(item: any) {\n\t// \tthis.items = this.items.filter(i => i !== item)\n\t// \tthis.triggerUpdate()\n\t// }\n}","import * as React from 'react'\n\nexport const Button = (props: any) => {\n    let [count, setCount] = React.useState(0)\n    return <button {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>\n}\n\nButton.defaultProps = {\n    style: {\n        backgroundColor: 'green',\n        borderRadius: '9999px',\n        fontSize: '13px',\n        padding: '10px 15px'\n    },\n    type: 'button',\n    tag: 'button'\n}\nButton.configs = {\n    type: 'button'\n}\n\nexport default Button","import React from 'react'\n\nexport const BaseElement = ({tag = 'div', children, ...props}: any) => {\n    return React.createElement(tag, {\n        ...props\n    }, children)\n}\n\nBaseElement.configs = {\n    type: 'base'\n}\nexport default BaseElement\n","import Button from './button'\nimport BaseElement from './base'\n\nconst elements = {\n\tButton,\n\tBaseElement\n}\nexport default elements","import * as React from 'react'\nimport {useEffect} from 'react'\nimport {Weaverse, WeaverseType} from './core'\nimport Elements from './elements'\n\nlet stitches = require('@stitches/core')\n\nconst createRootContext = (configs: WeaverseType) => {\n  const rootContext = new Weaverse(configs)\n  Object.keys(Elements).forEach(key => {\n    // @ts-ignore\n    Elements[key]?.configs?.type && rootContext.registerElement(Elements[key].configs.type, Elements[key])\n  })\n\n  return rootContext\n}\n\nconst WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n  let [, setData] = React.useState<any>(context.projectData)\n  useEffect(() => {\n    let handleUpdate = () => {\n      setData(context.projectData)\n    }\n    context.subscribe(handleUpdate)\n    context.updateProjectData()\n\n    return () => {\n      context.unsubscribe(handleUpdate)\n    }\n  }, [])\n  if (!context.projectData?.items?.length && defaultData) {\n    context.projectData = defaultData\n    context.initItemData()\n  }\n  return <RenderItem itemId={0} context={context}/>\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: any) => {\n  let [data, setData] = React.useState<any>(itemInstance.data)\n  let {id, type, childIds, ...rest} = data\n\n  useEffect(() => {\n    let handleUpdate = (update: any) => {\n      setData({...update})\n    }\n    itemInstance.subscribe(handleUpdate)\n    return () => {\n      itemInstance.unsubscribe(handleUpdate)\n    }\n  }, [])\n  let Component = elementInstances.get(type)\n  if (Component) {\n    return <Component key={id} data-wv-id={id} {...rest}>\n      {Array.isArray(childIds)\n          && childIds.map(childId =>\n              <RenderItem\n                  key={childId}\n                  itemId={childId}\n                  context={context}\n              />\n      )}\n    </Component>\n  }\n  return null\n}\n\n\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n  let {itemInstances, elementInstances} = context\n  let itemInstance = itemInstances.get(itemId)\n  if (itemInstance) {\n    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n  }\n  return <></>\n}\n\nexport {createRootContext, WeaverseRoot}\n"],"names":["isReactNative","navigator","product","isBrowser","window","Weaverse","appUrl","projectKey","projectData","Map","items","Set","e","data","_e$data","type","_e$data$type","startsWith","_this","isEditor","payload","background","instance","itemInstances","get","itemId","setData","style","this","init","registerElement","name","element","elementInstances","set","subscribeMessageEvent","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","updateProjectData","_this2","initItemData","err","console","error","currentFrameSubscription","addEventListener","handleMessageEvent","removeEventListener","_this3","top","postMessage","item","itemStore","_this4","id","WeaverseItemStore","itemData","weaverse","_this5","Object","assign","Component","Button","props","React","count","setCount","onClick","defaultProps","backgroundColor","borderRadius","fontSize","padding","tag","configs","BaseElement","children","createElement","elements","Item","itemInstance","context","childIds","rest","useEffect","handleUpdate","update","key","Array","isArray","map","childId","RenderItem","defaultData","_context$projectData","_context$projectData$","length","rootContext","keys","Elements"],"mappings":"8hBAAO,IAAMA,EAAqC,iBAAdC,WAAgD,gBAAtBA,UAAUC,QAC3DC,EAA8B,oBAAXC,SAA2BJ,ECoH9CK,mDAYkD,KAAjDC,IAAAA,OAAQC,IAAAA,WAAYC,IAAAA,kCAXd,IAAIC,uBACP,IAAIA,gBACgE,sCAC/D,oBACU,CAC9BC,MAAO,mBAEc,IAAIC,mBACf,0BAuEU,SAACC,uBACjBA,EAAEC,gBAAFC,EAAQC,OAARC,EAAcC,WAAW,oBACjBL,EAAEC,KAAKE,UAEZ,wBACJG,EAAKC,UAAW,YAEZ,6BACCC,EAAWR,EAAEC,KAAbO,QACQC,EAAcD,EAAdC,WACTC,EAAWJ,EAAKK,cAAcC,IADPJ,EAAtBK,QAEDH,GACHA,EAASI,QAAQ,CAChBC,MAAO,CACNN,WAAAA,YAjFDf,OAASA,GAAUsB,KAAKtB,YACxBC,WAAaA,GAAcqB,KAAKrB,WACrCC,IAAgBoB,KAAKpB,YAAcA,QAC9BqB,kCAGNC,gBAAA,SAAgBC,EAAcC,QACxBC,iBAAiBC,IAAIH,EAAMC,MAGjCH,KAAA,gBACMM,2BAGNC,UAAA,SAAUC,QACJC,UAAUC,IAAIF,MAGpBG,YAAA,SAAYH,QACNC,iBAAiBD,MAGvBI,cAAA,gBACMH,UAAUI,SAAQ,SAAAL,UAAMA,YACxBM,yBAGNC,iBAAA,kBACQC,EAAMjB,KAAKtB,sBAAwBsB,KAAKrB,YAAcuC,MAAK,SAAAC,UAAKA,EAAEC,aAG1EC,kBAAA,sBACKrB,KAAKrB,iBACHqC,mBAAmBE,MAAK,SAAAjC,GACxBA,IACHqC,EAAK1C,YAAcK,EACnBqC,EAAKC,eACLD,EAAKT,2BAEE,SAAAW,GACRC,QAAQC,MAAMF,SAKjBjB,sBAAA,4BAC8C,mBAAlCP,KAAK2B,+BACVA,2BAENpD,GAAaC,OAAOoD,iBAAiB,UAAW5B,KAAK6B,yBAChDF,yBAA2B,WAC/BpD,GAAaC,OAAOsD,oBAAoB,UAAWC,EAAKF,qBAElD7B,KAAK2B,4BAGbZ,oBAAA,SAAoB5B,kBAAAA,IAAAA,EAAO,2BACtBa,KAAKT,oBACRf,OAAOwD,QAAKC,YAAY,CACvB9C,KAAAA,EAAMK,QAAS,CACdb,WAAYqB,KAAKrB,WACjBC,YAAaoB,KAAKpB,cAEjB,SA0BL2C,aAAA,sBACKtC,EAAOe,KAAKpB,YACZK,EAAKH,OACRG,EAAKH,MAAMgC,SAAQ,SAAAoB,OACdC,EAAYC,EAAKzC,cAAcC,IAAIsC,EAAKG,KAAO,IAAIC,EAAkBJ,EAAME,GAC/EA,EAAKzC,cAAcW,IAAI4B,EAAKG,GAAIF,YAMvBG,EAKZ,SAAYC,EAAoBC,uBAApBD,IAAAA,EAAgB,cAJhB,kBACU,IAAIxD,iBAWhB,SAACE,GACVwD,EAAKxD,KAAOyD,OAAOC,OAAOF,EAAKxD,KAAMA,GACrCwD,EAAK5B,gCAGM,SAACJ,GACZgC,EAAK/B,UAAUC,IAAIF,qBAGN,SAACA,GACdgC,EAAK/B,iBAAiBD,uBAGP,WACfgC,EAAK/B,UAAUI,SAAQ,SAAAL,UACfA,EAAGgC,EAAKxD,eAtBXA,KAAOsD,MACPpD,EAAQoD,EAARpD,KACDA,SACEyD,UAAYJ,EAASnC,iBAAiBT,IAAIT,KC7OrC0D,EAAS,SAACC,SACKC,WAAe,GAAlCC,OAAOC,cACLF,0CAAYD,GAAOI,QAAS,kBAAMD,EAASD,EAAQ,qBAAiBA,IAG/EH,EAAOM,aAAe,CAClBpD,MAAO,CACHqD,gBAAiB,QACjBC,aAAc,SACdC,SAAU,OACVC,QAAS,aAEbpE,KAAM,SACNqE,IAAK,UAETX,EAAOY,QAAU,CACbtE,KAAM,mCChBGuE,EAAc,oBAAEF,IAAAA,aAAM,QAAOG,IAAAA,SAAab,gBAC5CC,EAAMa,cAAcJ,OACpBV,GACJa,IAGPD,EAAYD,QAAU,CAClBtE,KAAM,QCNV,IAAM0E,EAAW,CAChBhB,OAAAA,EACAa,YAAAA,8BCiCKI,EAAO,gBAAEC,IAAAA,aAAc1D,IAAAA,iBAAkB2D,IAAAA,UACvBjB,WAAoBgB,EAAa9E,MAAlDA,OAAMa,OACNuC,EAA+BpD,EAA/BoD,GAAIlD,EAA2BF,EAA3BE,KAAM8E,EAAqBhF,EAArBgF,SAAaC,IAAQjF,KAEpCkF,aAAU,eACJC,EAAe,SAACC,GAClBvE,OAAYuE,YAEdN,EAAavD,UAAU4D,GAChB,WACLL,EAAanD,YAAYwD,MAE1B,QACCxB,EAAYvC,EAAiBT,IAAIT,UACjCyD,EACKG,gBAACH,iBAAU0B,IAAKjC,eAAgBA,GAAQ6B,GAC5CK,MAAMC,QAAQP,IACRA,EAASQ,KAAI,SAAAC,UACZ3B,gBAAC4B,GACGL,IAAKI,EACL7E,OAAQ6E,EACRV,QAASA,QAKlB,MAIHW,EAAa,gBAAUX,IAAAA,QACP3D,EAAoB2D,EAApB3D,iBAChB0D,EADoCC,EAAnCrE,cAC4BC,MAFdC,eAGfkE,EACKhB,gBAACe,GAAKC,aAAcA,EAAc1D,iBAAkBA,EAAkB2D,QAASA,IAEjFjB,uDAzDY,oBAAEiB,IAAAA,QAASY,IAAAA,YACvB9E,EAAWiD,WAAoBiB,EAAQpF,uBAC9CuF,aAAU,eACJC,EAAe,WACjBtE,EAAQkE,EAAQpF,qBAElBoF,EAAQxD,UAAU4D,GAClBJ,EAAQ3C,oBAED,WACL2C,EAAQpD,YAAYwD,MAErB,aACEJ,EAAQpF,uBAARiG,EAAqB/F,QAArBgG,EAA4BC,SAAUH,IACzCZ,EAAQpF,YAAcgG,EACtBZ,EAAQzC,gBAEHwB,gBAAC4B,GAAW9E,OAAQ,EAAGmE,QAASA,+BA3Bf,SAACP,OACnBuB,EAAc,IAAIvG,EAASgF,UACjCf,OAAOuC,KAAKC,GAAUpE,SAAQ,SAAAwD,qBAE5BY,EAASZ,gBAAMb,kBAAStE,OAAQ6F,EAAY9E,gBAAgBgF,EAASZ,GAAKb,QAAQtE,KAAM+F,EAASZ,OAG5FU"}
+{"version":3,"file":"sdk-react.cjs.production.min.js","sources":["../src/elements/button.tsx","../src/elements/base.tsx","../src/elements/grid.tsx","../src/elements/index.ts","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const Button = React.forwardRef((props: any, ref) => {\n  let [count, setCount] = React.useState(0)\n  return <button ref={ref} {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>\n})\n\nButton.defaultProps = {\n    style: {\n        backgroundColor: 'green',\n        borderRadius: '9999px',\n        fontSize: '13px',\n        padding: '10px 15px'\n    },\n    type: 'button',\n    tag: 'button'\n}\n\nexport default Button","import React from 'react'\n\nexport const BaseElement = ({tag, children, ...props}: any) => {\n  return React.createElement(tag, {\n    ...props\n  }, children)\n}\n\nBaseElement.defaultProps = {\n  type: 'base',\n  tag: 'div'\n}\nexport default BaseElement\n","import React from 'react'\n\nexport default function Grid(props: any) {\n  return <div {...props} />\n}\n\nGrid.defaultProps = {\n  style: {\n    // display: 'grid',\n    // outline: '1px solid red',\n  },\n  type: 'grid'\n}","import Button from './button'\nimport BaseElement from './base'\nimport Grid from './grid'\n\nconst elements = {\n  Button,\n  BaseElement,\n  Grid\n}\nexport default elements","import React, {FC, useEffect, useState} from 'react'\nimport {isBrowser, Weaverse, WeaverseItemStore, WeaverseType} from '@weaverse/core'\nimport Elements from './elements'\n\n\nconst createRootContext = (configs: WeaverseType) => {\n  const rootContext = new Weaverse(configs)\n  // Register the element components\n  Object.keys(Elements).forEach(key => {\n    // @ts-ignore\n    Elements[key]?.defaultProps?.type && rootContext.registerElement(Elements[key].defaultProps.type, Elements[key])\n  })\n\n  return rootContext\n}\n\nconst WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n  let [, setData] = useState<any>(context.projectData)\n  useEffect(() => {\n    let handleUpdate = () => {\n      setData({...context.projectData})\n    }\n    context.subscribe(handleUpdate)\n    context.updateProjectData()\n    let shouldRenderStudio = context.loadStudio()\n    console.log('shouldRenderStudio', shouldRenderStudio)\n    if (shouldRenderStudio) {\n      handleUpdate()\n    }\n    return () => {\n      context.unsubscribe(handleUpdate)\n    }\n  }, [])\n  if (!context.projectData?.items?.length && defaultData) {\n    context.projectData = defaultData\n    context.initItemData()\n  }\n  let handleProps = context?.studioBridge?.handleProps || {}\n  console.log('handleProps', handleProps)\n  return <div {...handleProps}>\n    <RenderItem itemId={0} context={context}/>\n  </div>\n}\n\ntype ItemProps = {\n  itemInstance: WeaverseItemStore\n  elementInstances: Map<string, FC>\n  context: Weaverse\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: ItemProps) => {\n  let [data, setData] = useState<any>(itemInstance.data)\n  let {id, type, childIds, css, className, ...rest} = data\n  useEffect(() => {\n    let handleUpdate = (update: any) => {\n      setData({...update})\n    }\n    itemInstance.subscribe(handleUpdate)\n    if (!itemInstance.ref.current && isBrowser) {\n      Object.assign(itemInstance.ref, {current: document.querySelector(`[data-wv-id=\"${id}\"]`)})\n    }\n\n    return () => {\n      itemInstance.unsubscribe(handleUpdate)\n    }\n  }, [])\n\n  let realClassName = className || ''\n  if (css) {\n\n    // let stitches create the style from css object and\n    // then return the classname, so we can use it in the render\n    let selector = (context.stitchesInstance.css(css)()).className\n\n    realClassName += ' ' + selector\n  }\n  let Component = elementInstances.get(type)\n  if (Component) {\n    // @ts-ignore\n    if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n      rest.ref = itemInstance.ref\n    }\n    return <Component key={id} data-wv-id={id} {...rest} className={realClassName}>\n      {Array.isArray(childIds)\n              && childIds.map(childId =>\n                      <RenderItem\n                              key={childId}\n                              itemId={childId}\n                              context={context}\n                      />\n              )}\n    </Component>\n  }\n  return null\n}\n\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n  let {itemInstances, elementInstances} = context\n  let itemInstance = itemInstances.get(itemId)\n  if (itemInstance) {\n    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n  }\n  return <></>\n}\n\nexport {createRootContext, WeaverseRoot}\n"],"names":["Button","React","props","ref","count","setCount","onClick","defaultProps","style","backgroundColor","borderRadius","fontSize","padding","type","tag","BaseElement","children","createElement","Grid","elements","Item","itemInstance","elementInstances","context","useState","data","setData","id","childIds","css","className","rest","useEffect","handleUpdate","update","subscribe","current","isBrowser","Object","assign","document","querySelector","unsubscribe","realClassName","stitchesInstance","Component","get","$$typeof","Symbol","key","Array","isArray","map","childId","RenderItem","itemId","itemInstances","defaultData","projectData","updateProjectData","shouldRenderStudio","loadStudio","console","log","_context$projectData","items","_context$projectData$","length","initItemData","handleProps","studioBridge","configs","rootContext","Weaverse","keys","Elements","forEach","registerElement"],"mappings":"mgBAEO,IAAMA,EAASC,cAAiB,SAACC,EAAYC,SAC1BF,WAAe,GAAlCG,OAAOC,cACLJ,wCAAQE,IAAKA,GAASD,GAAOI,QAAS,kBAAMD,EAASD,EAAQ,qBAAiBA,MAGvFJ,EAAOO,aAAe,CAClBC,MAAO,CACHC,gBAAiB,QACjBC,aAAc,SACdC,SAAU,OACVC,QAAS,aAEbC,KAAM,SACNC,IAAK,mCCbIC,EAAc,gBAAED,IAAAA,IAAKE,IAAAA,SAAad,gBACtCD,EAAMgB,cAAcH,OACtBZ,GACFc,aCHmBE,EAAKhB,UACpBD,uCAASC,IDKlBa,EAAYR,aAAe,CACzBM,KAAM,OACNC,IAAK,OCJPI,EAAKX,aAAe,CAClBC,MAAO,GAIPK,KAAM,YCPFM,EAAW,CACfnB,OAAAA,EACAe,YAAAA,EACAG,KAAAA,gDC4CIE,EAAO,gBAAEC,IAAAA,aAAcC,IAAAA,iBAAkBC,IAAAA,UACvBC,WAAcH,EAAaI,MAA5CA,OAAMC,OACNC,EAA+CF,EAA/CE,GAAId,EAA2CY,EAA3CZ,KAAMe,EAAqCH,EAArCG,SAAUC,EAA2BJ,EAA3BI,IAAKC,EAAsBL,EAAtBK,UAAcC,IAAQN,KACpDO,aAAU,eACJC,EAAe,SAACC,GAClBR,OAAYQ,YAEdb,EAAac,UAAUF,IAClBZ,EAAalB,IAAIiC,SAAWC,aAC/BC,OAAOC,OAAOlB,EAAalB,IAAK,CAACiC,QAASI,SAASC,8BAA8Bd,UAG5E,WACLN,EAAaqB,YAAYT,MAE1B,QAECU,EAAgBb,GAAa,GAC7BD,IAMFc,GAAiB,IAFDpB,EAAQqB,iBAAiBf,IAAIA,EAA7BN,GAAqCO,eAInDe,EAAYvB,EAAiBwB,IAAIjC,UACjCgC,GAEEA,EAAUE,WAAaC,WAAW,uBACpCjB,EAAK5B,IAAMkB,EAAalB,KAEnBF,gBAAC4C,iBAAUI,IAAKtB,eAAgBA,GAAQI,GAAMD,UAAWa,IAC7DO,MAAMC,QAAQvB,IACJA,EAASwB,KAAI,SAAAC,UACRpD,gBAACqD,GACOL,IAAKI,EACLE,OAAQF,EACR9B,QAASA,SAK9B,MAGH+B,EAAa,gBAAU/B,IAAAA,QACPD,EAAoBC,EAApBD,iBAChBD,EADoCE,EAAnCiC,cAC4BV,MAFdS,eAGflC,EACKpB,gBAACmB,GAAKC,aAAcA,EAAcC,iBAAkBA,EAAkBC,QAASA,IAEjFtB,uDAvFY,sBAAEsB,IAAAA,QAASkC,IAAAA,YACvB/B,EAAWF,WAAcD,EAAQmC,gBACxC1B,aAAU,eACJC,EAAe,WACjBP,OAAYH,EAAQmC,eAEtBnC,EAAQY,UAAUF,GAClBV,EAAQoC,wBACJC,EAAqBrC,EAAQsC,oBACjCC,QAAQC,IAAI,qBAAsBH,GAC9BA,GACF3B,IAEK,WACLV,EAAQmB,YAAYT,MAErB,aACEV,EAAQmC,uBAARM,EAAqBC,QAArBC,EAA4BC,SAAUV,IACzClC,EAAQmC,YAAcD,EACtBlC,EAAQ6C,oBAENC,SAAc9C,YAAAA,EAAS+C,uBAAcD,cAAe,UACxDP,QAAQC,IAAI,cAAeM,GACpBpE,uCAASoE,GACdpE,gBAACqD,GAAWC,OAAQ,EAAGhC,QAASA,gCAnCV,SAACgD,OACnBC,EAAc,IAAIC,WAASF,UAEjCjC,OAAOoC,KAAKC,GAAUC,SAAQ,SAAA3B,qBAE5B0B,EAAS1B,gBAAM1C,uBAAcM,OAAQ2D,EAAYK,gBAAgBF,EAAS1B,GAAK1C,aAAaM,KAAM8D,EAAS1B,OAGtGuB"}

package/dist/sdk-react.esm.js

@@ -1,5 +1,5 @@
-import React__default, { useState, createElement, useEffect, Fragment } from 'react';
-import fetch from 'isomorphic-unfetch';
+import React__default, { forwardRef, useState, createElement, useEffect } from 'react';
+import { Weaverse, isBrowser } from '@weaverse/core';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -34,214 +34,19 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative';
-var isBrowser = typeof window !== 'undefined' && !isReactNative;
-
-// TODO: Implement Weaverse SDK class
-var Weaverse = /*#__PURE__*/function () {
-  function Weaverse(_temp) {
-    var _this = this;
-
-    var _ref = _temp === void 0 ? {} : _temp,
-        appUrl = _ref.appUrl,
-        projectKey = _ref.projectKey,
-        projectData = _ref.projectData;
-
-    this.elementInstances = new Map();
-    this.itemInstances = new Map();
-    this.appUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io';
-    this.projectKey = '';
-    this.projectData = {
-      items: []
-    };
-    this.listeners = new Set();
-    this.isEditor = false;
-
-    this.handleMessageEvent = function (e) {
-      var _e$data, _e$data$type;
-
-      if ((_e$data = e.data) != null && (_e$data$type = _e$data.type) != null && _e$data$type.startsWith('weaverse.')) {
-        var type = e.data.type;
-
-        switch (type) {
-          case 'weaverse.editor.ready':
-            _this.isEditor = true;
-            break;
-
-          case 'weaverse.editor.update':
-            var payload = e.data.payload;
-            var itemId = payload.itemId,
-                background = payload.background;
-
-            var instance = _this.itemInstances.get(itemId);
-
-            if (instance) {
-              instance.setData({
-                style: {
-                  background: background
-                }
-              });
-            }
-
-        }
-      }
-    };
-
-    this.appUrl = appUrl || this.appUrl;
-    this.projectKey = projectKey || this.projectKey;
-    projectData && (this.projectData = projectData);
-    this.init();
-  }
-
-  var _proto = Weaverse.prototype;
-
-  _proto.registerElement = function registerElement(name, element) {
-    this.elementInstances.set(name, element);
-  };
-
-  _proto.init = function init() {
-    this.subscribeMessageEvent();
-  };
-
-  _proto.subscribe = function subscribe(fn) {
-    this.listeners.add(fn);
-  };
-
-  _proto.unsubscribe = function unsubscribe(fn) {
-    this.listeners["delete"](fn);
-  };
-
-  _proto.triggerUpdate = function triggerUpdate() {
-    this.listeners.forEach(function (fn) {
-      return fn();
-    });
-    this.triggerEditorUpdate();
-  };
-
-  _proto.fetchProjectData = function fetchProjectData() {
-    return fetch(this.appUrl + ("/api/public/" + this.projectKey)).then(function (r) {
-      return r.json();
-    });
-  };
-
-  _proto.updateProjectData = function updateProjectData() {
-    var _this2 = this;
-
-    if (this.projectKey) {
-      this.fetchProjectData().then(function (data) {
-        if (data) {
-          _this2.projectData = data;
-
-          _this2.initItemData();
-
-          _this2.triggerUpdate();
-        }
-      })["catch"](function (err) {
-        console.error(err);
-      });
-    }
-  };
-
-  _proto.subscribeMessageEvent = function subscribeMessageEvent() {
-    var _this3 = this;
-
-    if (typeof this.currentFrameSubscription === 'function') {
-      this.currentFrameSubscription();
-    }
-
-    isBrowser && window.addEventListener('message', this.handleMessageEvent);
-
-    this.currentFrameSubscription = function () {
-      isBrowser && window.removeEventListener('message', _this3.handleMessageEvent);
-    };
-
-    return this.currentFrameSubscription;
-  };
-
-  _proto.triggerEditorUpdate = function triggerEditorUpdate(type) {
-    if (type === void 0) {
-      type = 'weaverse.workspace.init';
-    }
-
-    if (this.isEditor) {
-      var _window$top;
-
-      (_window$top = window.top) == null ? void 0 : _window$top.postMessage({
-        type: type,
-        payload: {
-          projectKey: this.projectKey,
-          projectData: this.projectData
-        }
-      }, '*');
-    }
-  };
-
-  _proto.initItemData = function initItemData() {
-    var _this4 = this;
-
-    var data = this.projectData;
-
-    if (data.items) {
-      data.items.forEach(function (item) {
-        var itemStore = _this4.itemInstances.get(item.id) || new WeaverseItemStore(item, _this4);
-
-        _this4.itemInstances.set(item.id, itemStore);
-      });
-    }
-  };
-
-  return Weaverse;
-}();
-var WeaverseItemStore = function WeaverseItemStore(itemData, weaverse) {
-  var _this5 = this;
-
-  if (itemData === void 0) {
-    itemData = {};
-  }
-
-  this.data = {};
-  this.listeners = new Set();
-
-  this.setData = function (data) {
-    _this5.data = Object.assign(_this5.data, data);
-
-    _this5.triggerUpdate();
-  };
-
-  this.subscribe = function (fn) {
-    _this5.listeners.add(fn);
-  };
-
-  this.unsubscribe = function (fn) {
-    _this5.listeners["delete"](fn);
-  };
-
-  this.triggerUpdate = function () {
-    _this5.listeners.forEach(function (fn) {
-      return fn(_this5.data);
-    });
-  };
-
-  this.data = itemData;
-  var _itemData = itemData,
-      type = _itemData.type;
-
-  if (type) {
-    this.Component = weaverse.elementInstances.get(type);
-  }
-};
-
-var Button = function Button(props) {
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var _React$useState = useState(0),
       count = _React$useState[0],
       setCount = _React$useState[1];
 
-  return createElement("button", Object.assign({}, props, {
+  return createElement("button", Object.assign({
+    ref: ref
+  }, props, {
     onClick: function onClick() {
       return setCount(count + 1);
     }
   }), "Test Button ", count);
-};
+});
 Button.defaultProps = {
   style: {
     backgroundColor: 'green',
@@ -252,57 +57,73 @@ Button.defaultProps = {
   type: 'button',
   tag: 'button'
 };
-Button.configs = {
-  type: 'button'
-};
 
 var _excluded = ["tag", "children"];
 var BaseElement = function BaseElement(_ref) {
-  var _ref$tag = _ref.tag,
-      tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+  var tag = _ref.tag,
       children = _ref.children,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return React__default.createElement(tag, _extends({}, props), children);
 };
-BaseElement.configs = {
-  type: 'base'
+BaseElement.defaultProps = {
+  type: 'base',
+  tag: 'div'
+};
+
+function Grid(props) {
+  return React__default.createElement("div", Object.assign({}, props));
+}
+Grid.defaultProps = {
+  style: {// display: 'grid',
+    // outline: '1px solid red',
+  },
+  type: 'grid'
 };
 
 var elements = {
   Button: Button,
-  BaseElement: BaseElement
+  BaseElement: BaseElement,
+  Grid: Grid
 };
 
-var _excluded$1 = ["id", "type", "childIds"];
+var _excluded$1 = ["id", "type", "childIds", "css", "className"];
 
 var createRootContext = function createRootContext(configs) {
-  var rootContext = new Weaverse(configs);
+  var rootContext = new Weaverse(configs); // Register the element components
+
   Object.keys(elements).forEach(function (key) {
-    var _Elements$key, _Elements$key$configs;
+    var _Elements$key, _Elements$key$default;
 
     // @ts-ignore
-    ((_Elements$key = elements[key]) == null ? void 0 : (_Elements$key$configs = _Elements$key.configs) == null ? void 0 : _Elements$key$configs.type) && rootContext.registerElement(elements[key].configs.type, elements[key]);
+    ((_Elements$key = elements[key]) == null ? void 0 : (_Elements$key$default = _Elements$key.defaultProps) == null ? void 0 : _Elements$key$default.type) && rootContext.registerElement(elements[key].defaultProps.type, elements[key]);
   });
   return rootContext;
 };
 
 var WeaverseRoot = function WeaverseRoot(_ref) {
-  var _context$projectData, _context$projectData$;
+  var _context$projectData, _context$projectData$, _context$studioBridge;
 
   var context = _ref.context,
       defaultData = _ref.defaultData;
 
-  var _React$useState = useState(context.projectData),
-      setData = _React$useState[1];
+  var _useState = useState(context.projectData),
+      setData = _useState[1];
 
   useEffect(function () {
     var handleUpdate = function handleUpdate() {
-      setData(context.projectData);
+      setData(_extends({}, context.projectData));
     };
 
     context.subscribe(handleUpdate);
     context.updateProjectData();
+    var shouldRenderStudio = context.loadStudio();
+    console.log('shouldRenderStudio', shouldRenderStudio);
+
+    if (shouldRenderStudio) {
+      handleUpdate();
+    }
+
     return function () {
       context.unsubscribe(handleUpdate);
     };
@@ -313,10 +134,12 @@ var WeaverseRoot = function WeaverseRoot(_ref) {
     context.initItemData();
   }
 
-  return createElement(RenderItem, {
+  var handleProps = (context == null ? void 0 : (_context$studioBridge = context.studioBridge) == null ? void 0 : _context$studioBridge.handleProps) || {};
+  console.log('handleProps', handleProps);
+  return React__default.createElement("div", Object.assign({}, handleProps), React__default.createElement(RenderItem, {
     itemId: 0,
     context: context
-  });
+  }));
 };
 
 var Item = function Item(_ref2) {
@@ -324,13 +147,15 @@ var Item = function Item(_ref2) {
       elementInstances = _ref2.elementInstances,
       context = _ref2.context;
 
-  var _React$useState2 = useState(itemInstance.data),
-      data = _React$useState2[0],
-      setData = _React$useState2[1];
+  var _useState2 = useState(itemInstance.data),
+      data = _useState2[0],
+      setData = _useState2[1];
 
   var id = data.id,
       type = data.type,
       childIds = data.childIds,
+      css = data.css,
+      className = data.className,
       rest = _objectWithoutPropertiesLoose(data, _excluded$1);
 
   useEffect(function () {
@@ -339,18 +164,41 @@ var Item = function Item(_ref2) {
     };
 
     itemInstance.subscribe(handleUpdate);
+
+    if (!itemInstance.ref.current && isBrowser) {
+      Object.assign(itemInstance.ref, {
+        current: document.querySelector("[data-wv-id=\"" + id + "\"]")
+      });
+    }
+
     return function () {
       itemInstance.unsubscribe(handleUpdate);
     };
   }, []);
+  var realClassName = className || '';
+
+  if (css) {
+    // let stitches create the style from css object and
+    // then return the classname, so we can use it in the render
+    var selector = context.stitchesInstance.css(css)().className;
+    realClassName += ' ' + selector;
+  }
+
   var Component = elementInstances.get(type);
 
   if (Component) {
-    return createElement(Component, Object.assign({
+    // @ts-ignore
+    if (Component.$$typeof === Symbol["for"]('react.forward_ref')) {
+      rest.ref = itemInstance.ref;
+    }
+
+    return React__default.createElement(Component, Object.assign({
       key: id,
       "data-wv-id": id
-    }, rest), Array.isArray(childIds) && childIds.map(function (childId) {
-      return createElement(RenderItem, {
+    }, rest, {
+      className: realClassName
+    }), Array.isArray(childIds) && childIds.map(function (childId) {
+      return React__default.createElement(RenderItem, {
         key: childId,
         itemId: childId,
         context: context
@@ -369,14 +217,14 @@ var RenderItem = function RenderItem(_ref3) {
   var itemInstance = itemInstances.get(itemId);
 
   if (itemInstance) {
-    return createElement(Item, {
+    return React__default.createElement(Item, {
       itemInstance: itemInstance,
       elementInstances: elementInstances,
       context: context
     });
   }
 
-  return createElement(Fragment, null);
+  return React__default.createElement(React__default.Fragment, null);
 };
 
 export { WeaverseRoot, createRootContext };

package/dist/sdk-react.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdk-react.esm.js","sources":["../src/utils/index.ts","../src/core.ts","../src/elements/button.tsx","../src/elements/base.tsx","../src/elements/index.ts","../src/index.tsx"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\nimport fetch from 'isomorphic-unfetch'\nimport {isBrowser} from './utils'\n\n\nexport interface ProjectDataItemType {\n\ttype: string\n\tname: string\n\tid: string | number\n}\n\nexport interface ProjectDataType {\n\titems: ProjectDataItemType[]\n}\n\n// const isSheetAccessible = (sheet: CSSStyleSheet) => {\n// \tif (sheet.href && !sheet.href.startsWith(location.origin)) {\n// \t\treturn false\n// \t}\n//\n// \ttry {\n// \t\tsheet.cssRules\n// \t\treturn true\n// \t} catch (e) {\n// \t\treturn false\n// \t}\n// }\n\n// export class WeaverseStyle {\n// \tpublic styleSheets: StyleSheetList\n// \tpublic document: Document\n//\n// \tconstructor(root: Document) {\n// \t\tthis.document = root\n// \t\tthis.styleSheets = this.document.styleSheets\n// \t}\n//\n// \t// Create styleSheet instance that work both on client and server side\n// \tcreateSheet = (root?: Document) => {\n// \t\tlet sheetInstance: any = null\n//\n// \t\tconst reset = () => {\n// \t\t\tconst sheets = Object(root).styleSheets || []\n// \t\t\t// iterate all stylesheets until a hydratable stylesheet is found\n// \t\t\tfor (const sheet of sheets) {\n// \t\t\t\tif (!isSheetAccessible(sheet)) continue\n//\n// \t\t\t\tfor (let index = 0, rules = sheet.cssRules; rules[index]; ++index) {\n// \t\t\t\t\t// /** @type {CSSStyleRule} Possible indicator rule. */\n// \t\t\t\t\tconst check = Object(rules[index])\n// \t\t\t\t\tif (check.selectorText && check.selectorText.includes('@media')) {\n// \t\t\t\t\t\tif (!sheetInstance) sheetInstance = {sheet, reset, rules: sheet.cssRules}\n// \t\t\t\t\t\tbreak\n// \t\t\t\t\t}\n//\n// \t\t\t\t}\n//\n// \t\t\t\t// if a hydratable stylesheet is found, stop looking\n// \t\t\t\tif (sheetInstance) break\n// \t\t\t}\n// \t\t\t// if no hydratable stylesheet is found\n// \t\t\tif (!sheetInstance) {\n// \t\t\t\tconst createCSSMediaRule = (sourceCssText: string) => {\n// \t\t\t\t\tlet rule: any = {\n// \t\t\t\t\t\tcssRules: [],\n// \t\t\t\t\t\tinsertRule(cssText: string, index: number) {\n// \t\t\t\t\t\t\tthis.cssRules.splice(index, 0, createCSSMediaRule(cssText))\n// \t\t\t\t\t\t},\n// \t\t\t\t\t\tget cssText() {\n// \t\t\t\t\t\t\treturn sourceCssText === '@media{}' ? `@media{${[].map.call(this.cssRules, (cssRule: any) => cssRule.cssText).join('')}}` : sourceCssText\n// \t\t\t\t\t\t}\n// \t\t\t\t\t}\n// \t\t\t\t\treturn rule\n// \t\t\t\t}\n//\n// \t\t\t\tsheetInstance = {\n// \t\t\t\t\tsheet: root ? (root.head || root).appendChild(root.createElement('style')).sheet : createCSSMediaRule(''),\n// \t\t\t\t\trules: {},\n// \t\t\t\t\treset,\n// \t\t\t\t\ttoString() {\n// \t\t\t\t\t\tconst {cssRules} = sheetInstance.sheet\n// \t\t\t\t\t\treturn [].map\n// \t\t\t\t\t\t\t.call(cssRules, (cssMediaRule: CSSMediaRule, cssRuleIndex) => {\n// \t\t\t\t\t\t\t\tconst {cssText} = cssMediaRule\n//\n// \t\t\t\t\t\t\t\tlet lastRuleCssText = ''\n// \t\t\t\t\t\t\t\tif (cssRules[cssRuleIndex - 1]) {\n// \t\t\t\t\t\t\t\t\tif (!cssMediaRule.cssRules.length) return ''\n//\n// \t\t\t\t\t\t\t\t\tfor (const name in sheetInstance.rules) {\n// \t\t\t\t\t\t\t\t\t\tif (sheetInstance.rules[name].group === cssMediaRule) {\n// \t\t\t\t\t\t\t\t\t\t\treturn `--sxs{--sxs:${[...sheetInstance.rules[name].cache].join(' ')}}${cssText}`\n// \t\t\t\t\t\t\t\t\t\t}\n// \t\t\t\t\t\t\t\t\t}\n//\n// \t\t\t\t\t\t\t\t\treturn cssMediaRule.cssRules.length ? `${lastRuleCssText}${cssText}` : ''\n// \t\t\t\t\t\t\t\t}\n//\n// \t\t\t\t\t\t\t\treturn cssText\n// \t\t\t\t\t\t\t})\n// \t\t\t\t\t\t\t.join('')\n// \t\t\t\t\t}\n// \t\t\t\t}\n// \t\t\t}\n// \t\t}\n//\n// \t}\n//\n// }\n\nexport type WeaverseType = {\n\t[key: string]: any\n\tappUrl?: string,\n\tprojectKey?: string,\n\tprojectData?: ProjectDataType\n}\n\nexport class Weaverse {\n\telementInstances = new Map<string, any>()\n\titemInstances = new Map<string | number, WeaverseItemStore>()\n\tappUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n\tprojectKey: string = ''\n\tprojectData: ProjectDataType = {\n\t\titems: []\n\t}\n\tlisteners: Set<any> = new Set()\n\tisEditor = false\n\tcurrentFrameSubscription: any\n\n\tconstructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n\t\tthis.appUrl = appUrl || this.appUrl\n\t\tthis.projectKey = projectKey || this.projectKey\n\t\tprojectData && (this.projectData = projectData)\n\t\tthis.init()\n\t}\n\n\tregisterElement(name: string, element: any) {\n\t\tthis.elementInstances.set(name, element)\n\t}\n\n\tinit() {\n\t\tthis.subscribeMessageEvent()\n\t}\n\n\tsubscribe(fn: any) {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe(fn: any) {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate() {\n\t\tthis.listeners.forEach(fn => fn())\n\t\tthis.triggerEditorUpdate()\n\t}\n\n\tfetchProjectData() {\n\t\treturn fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json())\n\t}\n\n\tupdateProjectData() {\n\t\tif (this.projectKey) {\n\t\t\tthis.fetchProjectData().then(data => {\n\t\t\t\tif (data) {\n\t\t\t\t\tthis.projectData = data\n\t\t\t\t\tthis.initItemData()\n\t\t\t\t\tthis.triggerUpdate()\n\t\t\t\t}\n\t\t\t}).catch(err => {\n\t\t\t\tconsole.error(err)\n\t\t\t})\n\t\t}\n\t}\n\n\tsubscribeMessageEvent() {\n\t\tif (typeof this.currentFrameSubscription === 'function') {\n\t\t\tthis.currentFrameSubscription()\n\t\t}\n\t\tisBrowser && window.addEventListener('message', this.handleMessageEvent)\n\t\tthis.currentFrameSubscription = () => {\n\t\t\tisBrowser && window.removeEventListener('message', this.handleMessageEvent)\n\t\t}\n\t\treturn this.currentFrameSubscription\n\t}\n\n\ttriggerEditorUpdate(type = 'weaverse.workspace.init') {\n\t\tif (this.isEditor) {\n\t\t\twindow.top?.postMessage({\n\t\t\t\ttype, payload: {\n\t\t\t\t\tprojectKey: this.projectKey,\n\t\t\t\t\tprojectData: this.projectData\n\t\t\t\t}\n\t\t\t}, '*')\n\t\t}\n\t}\n\n\thandleMessageEvent = (e: MessageEvent) => {\n\t\tif (e.data?.type?.startsWith('weaverse.')) {\n\t\t\tlet type = e.data.type\n\t\t\tswitch (type) {\n\t\t\t\tcase 'weaverse.editor.ready':\n\t\t\t\t\tthis.isEditor = true\n\t\t\t\t\tbreak\n\t\t\t\tcase 'weaverse.editor.update':\n\t\t\t\t\tlet {payload} = e.data\n\t\t\t\t\tlet {itemId, background} = payload\n\t\t\t\t\tlet instance = this.itemInstances.get(itemId)\n\t\t\t\t\tif (instance) {\n\t\t\t\t\t\tinstance.setData({\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\tbackground\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tinitItemData() {\n\t\tlet data = this.projectData\n\t\tif (data.items) {\n\t\t\tdata.items.forEach(item => {\n\t\t\t\tlet itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n\t\t\t\tthis.itemInstances.set(item.id, itemStore)\n\t\t\t})\n\t\t}\n\t}\n}\n\nexport class WeaverseItemStore {\n\tdata: any = {}\n\tlisteners: Set<any> = new Set()\n\tComponent: any\n\n\tconstructor(itemData: any = {}, weaverse: Weaverse) {\n\t\tthis.data = itemData\n\t\tlet {type} = itemData\n\t\tif (type) {\n\t\t\tthis.Component = weaverse.elementInstances.get(type)\n\t\t}\n\t}\n\n\tsetData = (data: any) => {\n\t\tthis.data = Object.assign(this.data, data)\n\t\tthis.triggerUpdate()\n\t}\n\n\tsubscribe = (fn: any) => {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe = (fn: any) => {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate = () => {\n\t\tthis.listeners.forEach(fn => {\n\t\t\treturn fn(this.data)\n\t\t})\n\t}\n\n\n\n\t// addItem(item: any) {\n\t// \tthis.items.push(item)\n\t// \tthis.triggerUpdate()\n\t// }\n\t//\n\t// removeItem(item: any) {\n\t// \tthis.items = this.items.filter(i => i !== item)\n\t// \tthis.triggerUpdate()\n\t// }\n}","import * as React from 'react'\n\nexport const Button = (props: any) => {\n    let [count, setCount] = React.useState(0)\n    return <button {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>\n}\n\nButton.defaultProps = {\n    style: {\n        backgroundColor: 'green',\n        borderRadius: '9999px',\n        fontSize: '13px',\n        padding: '10px 15px'\n    },\n    type: 'button',\n    tag: 'button'\n}\nButton.configs = {\n    type: 'button'\n}\n\nexport default Button","import React from 'react'\n\nexport const BaseElement = ({tag = 'div', children, ...props}: any) => {\n    return React.createElement(tag, {\n        ...props\n    }, children)\n}\n\nBaseElement.configs = {\n    type: 'base'\n}\nexport default BaseElement\n","import Button from './button'\nimport BaseElement from './base'\n\nconst elements = {\n\tButton,\n\tBaseElement\n}\nexport default elements","import * as React from 'react'\nimport {useEffect} from 'react'\nimport {Weaverse, WeaverseType} from './core'\nimport Elements from './elements'\n\nlet stitches = require('@stitches/core')\n\nconst createRootContext = (configs: WeaverseType) => {\n  const rootContext = new Weaverse(configs)\n  Object.keys(Elements).forEach(key => {\n    // @ts-ignore\n    Elements[key]?.configs?.type && rootContext.registerElement(Elements[key].configs.type, Elements[key])\n  })\n\n  return rootContext\n}\n\nconst WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n  let [, setData] = React.useState<any>(context.projectData)\n  useEffect(() => {\n    let handleUpdate = () => {\n      setData(context.projectData)\n    }\n    context.subscribe(handleUpdate)\n    context.updateProjectData()\n\n    return () => {\n      context.unsubscribe(handleUpdate)\n    }\n  }, [])\n  if (!context.projectData?.items?.length && defaultData) {\n    context.projectData = defaultData\n    context.initItemData()\n  }\n  return <RenderItem itemId={0} context={context}/>\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: any) => {\n  let [data, setData] = React.useState<any>(itemInstance.data)\n  let {id, type, childIds, ...rest} = data\n\n  useEffect(() => {\n    let handleUpdate = (update: any) => {\n      setData({...update})\n    }\n    itemInstance.subscribe(handleUpdate)\n    return () => {\n      itemInstance.unsubscribe(handleUpdate)\n    }\n  }, [])\n  let Component = elementInstances.get(type)\n  if (Component) {\n    return <Component key={id} data-wv-id={id} {...rest}>\n      {Array.isArray(childIds)\n          && childIds.map(childId =>\n              <RenderItem\n                  key={childId}\n                  itemId={childId}\n                  context={context}\n              />\n      )}\n    </Component>\n  }\n  return null\n}\n\n\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n  let {itemInstances, elementInstances} = context\n  let itemInstance = itemInstances.get(itemId)\n  if (itemInstance) {\n    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n  }\n  return <></>\n}\n\nexport {createRootContext, WeaverseRoot}\n"],"names":["isReactNative","navigator","product","isBrowser","window","Weaverse","appUrl","projectKey","projectData","Map","process","env","NODE_ENV","items","Set","e","data","type","startsWith","isEditor","payload","itemId","background","instance","itemInstances","get","setData","style","init","registerElement","name","element","elementInstances","set","subscribeMessageEvent","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","updateProjectData","initItemData","err","console","error","currentFrameSubscription","addEventListener","handleMessageEvent","removeEventListener","top","postMessage","item","itemStore","id","WeaverseItemStore","itemData","weaverse","Object","assign","Component","Button","props","React","count","setCount","onClick","defaultProps","backgroundColor","borderRadius","fontSize","padding","tag","configs","BaseElement","children","createElement","elements","createRootContext","rootContext","keys","Elements","key","WeaverseRoot","context","defaultData","useEffect","handleUpdate","length","RenderItem","Item","itemInstance","childIds","rest","update","Array","isArray","map","childId"],"mappings":"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"}
+{"version":3,"file":"sdk-react.esm.js","sources":["../src/elements/button.tsx","../src/elements/base.tsx","../src/elements/grid.tsx","../src/elements/index.ts","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const Button = React.forwardRef((props: any, ref) => {\n  let [count, setCount] = React.useState(0)\n  return <button ref={ref} {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>\n})\n\nButton.defaultProps = {\n    style: {\n        backgroundColor: 'green',\n        borderRadius: '9999px',\n        fontSize: '13px',\n        padding: '10px 15px'\n    },\n    type: 'button',\n    tag: 'button'\n}\n\nexport default Button","import React from 'react'\n\nexport const BaseElement = ({tag, children, ...props}: any) => {\n  return React.createElement(tag, {\n    ...props\n  }, children)\n}\n\nBaseElement.defaultProps = {\n  type: 'base',\n  tag: 'div'\n}\nexport default BaseElement\n","import React from 'react'\n\nexport default function Grid(props: any) {\n  return <div {...props} />\n}\n\nGrid.defaultProps = {\n  style: {\n    // display: 'grid',\n    // outline: '1px solid red',\n  },\n  type: 'grid'\n}","import Button from './button'\nimport BaseElement from './base'\nimport Grid from './grid'\n\nconst elements = {\n  Button,\n  BaseElement,\n  Grid\n}\nexport default elements","import React, {FC, useEffect, useState} from 'react'\nimport {isBrowser, Weaverse, WeaverseItemStore, WeaverseType} from '@weaverse/core'\nimport Elements from './elements'\n\n\nconst createRootContext = (configs: WeaverseType) => {\n  const rootContext = new Weaverse(configs)\n  // Register the element components\n  Object.keys(Elements).forEach(key => {\n    // @ts-ignore\n    Elements[key]?.defaultProps?.type && rootContext.registerElement(Elements[key].defaultProps.type, Elements[key])\n  })\n\n  return rootContext\n}\n\nconst WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n  let [, setData] = useState<any>(context.projectData)\n  useEffect(() => {\n    let handleUpdate = () => {\n      setData({...context.projectData})\n    }\n    context.subscribe(handleUpdate)\n    context.updateProjectData()\n    let shouldRenderStudio = context.loadStudio()\n    console.log('shouldRenderStudio', shouldRenderStudio)\n    if (shouldRenderStudio) {\n      handleUpdate()\n    }\n    return () => {\n      context.unsubscribe(handleUpdate)\n    }\n  }, [])\n  if (!context.projectData?.items?.length && defaultData) {\n    context.projectData = defaultData\n    context.initItemData()\n  }\n  let handleProps = context?.studioBridge?.handleProps || {}\n  console.log('handleProps', handleProps)\n  return <div {...handleProps}>\n    <RenderItem itemId={0} context={context}/>\n  </div>\n}\n\ntype ItemProps = {\n  itemInstance: WeaverseItemStore\n  elementInstances: Map<string, FC>\n  context: Weaverse\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: ItemProps) => {\n  let [data, setData] = useState<any>(itemInstance.data)\n  let {id, type, childIds, css, className, ...rest} = data\n  useEffect(() => {\n    let handleUpdate = (update: any) => {\n      setData({...update})\n    }\n    itemInstance.subscribe(handleUpdate)\n    if (!itemInstance.ref.current && isBrowser) {\n      Object.assign(itemInstance.ref, {current: document.querySelector(`[data-wv-id=\"${id}\"]`)})\n    }\n\n    return () => {\n      itemInstance.unsubscribe(handleUpdate)\n    }\n  }, [])\n\n  let realClassName = className || ''\n  if (css) {\n\n    // let stitches create the style from css object and\n    // then return the classname, so we can use it in the render\n    let selector = (context.stitchesInstance.css(css)()).className\n\n    realClassName += ' ' + selector\n  }\n  let Component = elementInstances.get(type)\n  if (Component) {\n    // @ts-ignore\n    if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n      rest.ref = itemInstance.ref\n    }\n    return <Component key={id} data-wv-id={id} {...rest} className={realClassName}>\n      {Array.isArray(childIds)\n              && childIds.map(childId =>\n                      <RenderItem\n                              key={childId}\n                              itemId={childId}\n                              context={context}\n                      />\n              )}\n    </Component>\n  }\n  return null\n}\n\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n  let {itemInstances, elementInstances} = context\n  let itemInstance = itemInstances.get(itemId)\n  if (itemInstance) {\n    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n  }\n  return <></>\n}\n\nexport {createRootContext, WeaverseRoot}\n"],"names":["Button","React","props","ref","count","setCount","onClick","defaultProps","style","backgroundColor","borderRadius","fontSize","padding","type","tag","BaseElement","children","createElement","Grid","elements","createRootContext","configs","rootContext","Weaverse","Object","keys","Elements","forEach","key","registerElement","WeaverseRoot","context","defaultData","useState","projectData","setData","useEffect","handleUpdate","subscribe","updateProjectData","shouldRenderStudio","loadStudio","console","log","unsubscribe","items","length","initItemData","handleProps","studioBridge","RenderItem","itemId","Item","itemInstance","elementInstances","data","id","childIds","css","className","rest","update","current","isBrowser","assign","document","querySelector","realClassName","selector","stitchesInstance","Component","get","$$typeof","Symbol","Array","isArray","map","childId","itemInstances"],"mappings":"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"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.7",
+  "version": "0.1.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -7,8 +7,7 @@
     "access": "public"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
     "node": ">=10"
@@ -24,7 +23,8 @@
     "analyze": "size-limit --why"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "husky": {
     "hooks": {
@@ -38,7 +38,7 @@
     "trailingComma": "es5"
   },
   "name": "@weaverse/react",
-  "author": "Paul Phan",
+  "author": "Weaverse Team",
   "module": "dist/sdk-react.esm.js",
   "size-limit": [
     {
@@ -51,19 +51,20 @@
     }
   ],
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^7.0.4",
-    "@types/react": "^17.0.37",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/react-is": "^17.0.3",
     "husky": "^7.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "size-limit": "^7.0.4",
+    "size-limit": "^7.0.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@stitches/core": "^1.2.6",
-    "isomorphic-unfetch": "^3.1.0"
+    "@nextui-org/react": "^1.0.2-beta.3",
+    "@weaverse/core": "^0.2.2"
   }
 }

package/dist/core.d.ts

@@ -1,46 +0,0 @@
-export interface ProjectDataItemType {
-    type: string;
-    name: string;
-    id: string | number;
-}
-export interface ProjectDataType {
-    items: ProjectDataItemType[];
-}
-export declare type WeaverseType = {
-    [key: string]: any;
-    appUrl?: string;
-    projectKey?: string;
-    projectData?: ProjectDataType;
-};
-export declare class Weaverse {
-    elementInstances: Map<string, any>;
-    itemInstances: Map<string | number, WeaverseItemStore>;
-    appUrl: string;
-    projectKey: string;
-    projectData: ProjectDataType;
-    listeners: Set<any>;
-    isEditor: boolean;
-    currentFrameSubscription: any;
-    constructor({ appUrl, projectKey, projectData }?: WeaverseType);
-    registerElement(name: string, element: any): void;
-    init(): void;
-    subscribe(fn: any): void;
-    unsubscribe(fn: any): void;
-    triggerUpdate(): void;
-    fetchProjectData(): Promise<any>;
-    updateProjectData(): void;
-    subscribeMessageEvent(): any;
-    triggerEditorUpdate(type?: string): void;
-    handleMessageEvent: (e: MessageEvent) => void;
-    initItemData(): void;
-}
-export declare class WeaverseItemStore {
-    data: any;
-    listeners: Set<any>;
-    Component: any;
-    constructor(itemData: any, weaverse: Weaverse);
-    setData: (data: any) => void;
-    subscribe: (fn: any) => void;
-    unsubscribe: (fn: any) => void;
-    triggerUpdate: () => void;
-}

package/dist/utils/index.d.ts

@@ -1,3 +0,0 @@
-export declare const isReactNative: boolean;
-export declare const isBrowser: boolean;
-export declare const isIframe: boolean;