@weaverse/react 0.1.5 → 0.1.9

package/src/core.ts

@@ -1,190 +0,0 @@
-// TODO: Implement Weaverse SDK class
-import fetch from 'isomorphic-unfetch'
-import Elements from '@weaverse/elements'
-import {useEffect} from 'react'
-import {isBrowser} from './utils'
-
-
-export interface ProjectDataItemType {
-	type: string
-	name: string
-	id: string | number
-}
-
-export interface ProjectDataType {
-	items: ProjectDataItemType[]
-}
-
-export class Weaverse {
-	elementInstances = new Map<string, any>()
-	itemInstances = new Map<string | number, WeaverseItemStore>()
-	appUrl: string = 'http://localhost:3000'
-	projectKey: string = ''
-	projectData: ProjectDataType = {
-		items: []
-	}
-	listeners: Set<any> = new Set()
-	isEditor = false
-	currentFrameSubscription: any
-
-	constructor({
-					appUrl,
-					projectKey,
-					projectData
-				}: { appUrl?: string, projectKey?: string, projectData?: ProjectDataType } = {}) {
-		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() {
-		Object.keys(Elements).forEach(key => {
-			// @ts-ignore
-			Elements[key]?.configs?.type && this.registerElement(Elements[key].configs.type, Elements[key])
-		})
-		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)
-		})
-	}
-
-	useSubscription = (fn: any) => {
-		useEffect(() => {
-			this.subscribe(fn)
-			return () => {
-				this.unsubscribe(fn)
-			}
-		}, [])
-	}
-
-
-	// addItem(item: any) {
-	// 	this.items.push(item)
-	// 	this.triggerUpdate()
-	// }
-	//
-	// removeItem(item: any) {
-	// 	this.items = this.items.filter(i => i !== item)
-	// 	this.triggerUpdate()
-	// }
-}

package/src/index.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react'
-import {useEffect} from 'react'
-import {Weaverse} from './core'
-
-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
-
-  let {useSubscription} = itemInstance
-  useSubscription((update: any) => {
-    console.log('update', update)
-    setData({...update})
-  })
-  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 {Weaverse, 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
-)