@weaverse/react 0.1.7 → 0.1.8

package/src/core.ts

@@ -1,274 +0,0 @@
-// TODO: Implement Weaverse SDK class
-import fetch from 'isomorphic-unfetch'
-import {isBrowser} from './utils'
-
-
-export interface ProjectDataItemType {
-	type: string
-	name: string
-	id: string | number
-}
-
-export interface ProjectDataType {
-	items: ProjectDataItemType[]
-}
-
-// const isSheetAccessible = (sheet: CSSStyleSheet) => {
-// 	if (sheet.href && !sheet.href.startsWith(location.origin)) {
-// 		return false
-// 	}
-//
-// 	try {
-// 		sheet.cssRules
-// 		return true
-// 	} catch (e) {
-// 		return false
-// 	}
-// }
-
-// export class WeaverseStyle {
-// 	public styleSheets: StyleSheetList
-// 	public document: Document
-//
-// 	constructor(root: Document) {
-// 		this.document = root
-// 		this.styleSheets = this.document.styleSheets
-// 	}
-//
-// 	// Create styleSheet instance that work both on client and server side
-// 	createSheet = (root?: Document) => {
-// 		let sheetInstance: any = null
-//
-// 		const reset = () => {
-// 			const sheets = Object(root).styleSheets || []
-// 			// iterate all stylesheets until a hydratable stylesheet is found
-// 			for (const sheet of sheets) {
-// 				if (!isSheetAccessible(sheet)) continue
-//
-// 				for (let index = 0, rules = sheet.cssRules; rules[index]; ++index) {
-// 					// /** @type {CSSStyleRule} Possible indicator rule. */
-// 					const check = Object(rules[index])
-// 					if (check.selectorText && check.selectorText.includes('@media')) {
-// 						if (!sheetInstance) sheetInstance = {sheet, reset, rules: sheet.cssRules}
-// 						break
-// 					}
-//
-// 				}
-//
-// 				// if a hydratable stylesheet is found, stop looking
-// 				if (sheetInstance) break
-// 			}
-// 			// if no hydratable stylesheet is found
-// 			if (!sheetInstance) {
-// 				const createCSSMediaRule = (sourceCssText: string) => {
-// 					let rule: any = {
-// 						cssRules: [],
-// 						insertRule(cssText: string, index: number) {
-// 							this.cssRules.splice(index, 0, createCSSMediaRule(cssText))
-// 						},
-// 						get cssText() {
-// 							return sourceCssText === '@media{}' ? `@media{${[].map.call(this.cssRules, (cssRule: any) => cssRule.cssText).join('')}}` : sourceCssText
-// 						}
-// 					}
-// 					return rule
-// 				}
-//
-// 				sheetInstance = {
-// 					sheet: root ? (root.head || root).appendChild(root.createElement('style')).sheet : createCSSMediaRule(''),
-// 					rules: {},
-// 					reset,
-// 					toString() {
-// 						const {cssRules} = sheetInstance.sheet
-// 						return [].map
-// 							.call(cssRules, (cssMediaRule: CSSMediaRule, cssRuleIndex) => {
-// 								const {cssText} = cssMediaRule
-//
-// 								let lastRuleCssText = ''
-// 								if (cssRules[cssRuleIndex - 1]) {
-// 									if (!cssMediaRule.cssRules.length) return ''
-//
-// 									for (const name in sheetInstance.rules) {
-// 										if (sheetInstance.rules[name].group === cssMediaRule) {
-// 											return `--sxs{--sxs:${[...sheetInstance.rules[name].cache].join(' ')}}${cssText}`
-// 										}
-// 									}
-//
-// 									return cssMediaRule.cssRules.length ? `${lastRuleCssText}${cssText}` : ''
-// 								}
-//
-// 								return cssText
-// 							})
-// 							.join('')
-// 					}
-// 				}
-// 			}
-// 		}
-//
-// 	}
-//
-// }
-
-export type WeaverseType = {
-	[key: string]: any
-	appUrl?: string,
-	projectKey?: string,
-	projectData?: ProjectDataType
-}
-
-export class Weaverse {
-	elementInstances = new Map<string, any>()
-	itemInstances = new Map<string | number, WeaverseItemStore>()
-	appUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'
-	projectKey: string = ''
-	projectData: ProjectDataType = {
-		items: []
-	}
-	listeners: Set<any> = new Set()
-	isEditor = false
-	currentFrameSubscription: any
-
-	constructor({appUrl, projectKey, projectData}: WeaverseType = {}) {
-		this.appUrl = appUrl || this.appUrl
-		this.projectKey = projectKey || this.projectKey
-		projectData && (this.projectData = projectData)
-		this.init()
-	}
-
-	registerElement(name: string, element: any) {
-		this.elementInstances.set(name, element)
-	}
-
-	init() {
-		this.subscribeMessageEvent()
-	}
-
-	subscribe(fn: any) {
-		this.listeners.add(fn)
-	}
-
-	unsubscribe(fn: any) {
-		this.listeners.delete(fn)
-	}
-
-	triggerUpdate() {
-		this.listeners.forEach(fn => fn())
-		this.triggerEditorUpdate()
-	}
-
-	fetchProjectData() {
-		return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json())
-	}
-
-	updateProjectData() {
-		if (this.projectKey) {
-			this.fetchProjectData().then(data => {
-				if (data) {
-					this.projectData = data
-					this.initItemData()
-					this.triggerUpdate()
-				}
-			}).catch(err => {
-				console.error(err)
-			})
-		}
-	}
-
-	subscribeMessageEvent() {
-		if (typeof this.currentFrameSubscription === 'function') {
-			this.currentFrameSubscription()
-		}
-		isBrowser && window.addEventListener('message', this.handleMessageEvent)
-		this.currentFrameSubscription = () => {
-			isBrowser && window.removeEventListener('message', this.handleMessageEvent)
-		}
-		return this.currentFrameSubscription
-	}
-
-	triggerEditorUpdate(type = 'weaverse.workspace.init') {
-		if (this.isEditor) {
-			window.top?.postMessage({
-				type, payload: {
-					projectKey: this.projectKey,
-					projectData: this.projectData
-				}
-			}, '*')
-		}
-	}
-
-	handleMessageEvent = (e: MessageEvent) => {
-		if (e.data?.type?.startsWith('weaverse.')) {
-			let type = e.data.type
-			switch (type) {
-				case 'weaverse.editor.ready':
-					this.isEditor = true
-					break
-				case 'weaverse.editor.update':
-					let {payload} = e.data
-					let {itemId, background} = payload
-					let instance = this.itemInstances.get(itemId)
-					if (instance) {
-						instance.setData({
-							style: {
-								background
-							}
-						})
-					}
-			}
-		}
-	}
-
-	initItemData() {
-		let data = this.projectData
-		if (data.items) {
-			data.items.forEach(item => {
-				let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)
-				this.itemInstances.set(item.id, itemStore)
-			})
-		}
-	}
-}
-
-export class WeaverseItemStore {
-	data: any = {}
-	listeners: Set<any> = new Set()
-	Component: any
-
-	constructor(itemData: any = {}, weaverse: Weaverse) {
-		this.data = itemData
-		let {type} = itemData
-		if (type) {
-			this.Component = weaverse.elementInstances.get(type)
-		}
-	}
-
-	setData = (data: any) => {
-		this.data = Object.assign(this.data, data)
-		this.triggerUpdate()
-	}
-
-	subscribe = (fn: any) => {
-		this.listeners.add(fn)
-	}
-
-	unsubscribe = (fn: any) => {
-		this.listeners.delete(fn)
-	}
-
-	triggerUpdate = () => {
-		this.listeners.forEach(fn => {
-			return fn(this.data)
-		})
-	}
-
-
-
-	// addItem(item: any) {
-	// 	this.items.push(item)
-	// 	this.triggerUpdate()
-	// }
-	//
-	// removeItem(item: any) {
-	// 	this.items = this.items.filter(i => i !== item)
-	// 	this.triggerUpdate()
-	// }
-}

package/src/elements/base.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-export const BaseElement = ({tag = 'div', children, ...props}: any) => {
-    return React.createElement(tag, {
-        ...props
-    }, children)
-}
-
-BaseElement.configs = {
-    type: 'base'
-}
-export default BaseElement

package/src/elements/button.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-
-export const Button = (props: any) => {
-    let [count, setCount] = React.useState(0)
-    return <button {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>
-}
-
-Button.defaultProps = {
-    style: {
-        backgroundColor: 'green',
-        borderRadius: '9999px',
-        fontSize: '13px',
-        padding: '10px 15px'
-    },
-    type: 'button',
-    tag: 'button'
-}
-Button.configs = {
-    type: 'button'
-}
-
-export default Button

package/src/elements/index.ts

@@ -1,8 +0,0 @@
-import Button from './button'
-import BaseElement from './base'
-
-const elements = {
-	Button,
-	BaseElement
-}
-export default elements

package/src/index.tsx

@@ -1,78 +0,0 @@
-import * as React from 'react'
-import {useEffect} from 'react'
-import {Weaverse, WeaverseType} from './core'
-import Elements from './elements'
-
-let stitches = require('@stitches/core')
-
-const createRootContext = (configs: WeaverseType) => {
-  const rootContext = new Weaverse(configs)
-  Object.keys(Elements).forEach(key => {
-    // @ts-ignore
-    Elements[key]?.configs?.type && rootContext.registerElement(Elements[key].configs.type, Elements[key])
-  })
-
-  return rootContext
-}
-
-const WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {
-  let [, setData] = React.useState<any>(context.projectData)
-  useEffect(() => {
-    let handleUpdate = () => {
-      setData(context.projectData)
-    }
-    context.subscribe(handleUpdate)
-    context.updateProjectData()
-
-    return () => {
-      context.unsubscribe(handleUpdate)
-    }
-  }, [])
-  if (!context.projectData?.items?.length && defaultData) {
-    context.projectData = defaultData
-    context.initItemData()
-  }
-  return <RenderItem itemId={0} context={context}/>
-}
-
-
-const Item = ({itemInstance, elementInstances, context}: any) => {
-  let [data, setData] = React.useState<any>(itemInstance.data)
-  let {id, type, childIds, ...rest} = data
-
-  useEffect(() => {
-    let handleUpdate = (update: any) => {
-      setData({...update})
-    }
-    itemInstance.subscribe(handleUpdate)
-    return () => {
-      itemInstance.unsubscribe(handleUpdate)
-    }
-  }, [])
-  let Component = elementInstances.get(type)
-  if (Component) {
-    return <Component key={id} data-wv-id={id} {...rest}>
-      {Array.isArray(childIds)
-          && childIds.map(childId =>
-              <RenderItem
-                  key={childId}
-                  itemId={childId}
-                  context={context}
-              />
-      )}
-    </Component>
-  }
-  return null
-}
-
-
-const RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {
-  let {itemInstances, elementInstances} = context
-  let itemInstance = itemInstances.get(itemId)
-  if (itemInstance) {
-    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>
-  }
-  return <></>
-}
-
-export {createRootContext, WeaverseRoot}

package/src/types.d.ts

@@ -1,13 +0,0 @@
-import {ReactChild} from 'react'
-
-export interface HWSDKConfig {
-    initialData?: any
-    token?: string
-    projectId?: string
-    hydrate?: boolean
-    apiUrl?: string
-}
-
-export interface HWProps extends HWSDKConfig {
-    children?: ReactChild;
-}

package/src/utils/index.ts

@@ -1,3 +0,0 @@
-export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'
-export const isBrowser = typeof window !== 'undefined' && !isReactNative
-export const isIframe = isBrowser && window.top !== window.self

package/src/utils/toHash.js

@@ -1,23 +0,0 @@
-const toAlphabeticChar = (/** @type {number} */ code) => String.fromCharCode(code + (code > 25 ? 39 : 97))
-
-const toAlphabeticName = (/** @type {number} */ code) => {
-	let name = ''
-	let x
-
-	for (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toAlphabeticChar(x % 52) + name
-
-	return toAlphabeticChar(x % 52) + name
-}
-
-const toPhash = (/** @type {number} */ h, /** @type {string} */ x) => {
-	let i = x.length
-	while (i) h = (h * 33) ^ x.charCodeAt(--i)
-	return h
-}
-
-export const toHash = (/** @type {object} */ value) => toAlphabeticName(
-	toPhash(
-		5381,
-		JSON.stringify(value)
-	) >>> 0
-)