@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27

package/dist/runtime-framework/react/utils/is.ts

@@ -0,0 +1,46 @@
+export function isClassComponent (R, component) {
+  const prototype = component.prototype
+
+  // For React Redux
+  if (component.displayName?.includes('Connect')) return false
+
+  return (
+    isFunction(component.render) ||
+    !!prototype?.isReactComponent ||
+    prototype instanceof R.Component // compat for some others react-like library
+  )
+}
+
+export function isString (o: unknown): o is string {
+  return typeof o === 'string'
+}
+
+export function isUndefined (o: unknown): o is undefined {
+  return typeof o === 'undefined'
+}
+
+export function isNull (o: unknown): o is null {
+  return o === null
+}
+
+export function isObject<T> (o: unknown): o is T {
+  return o !== null && typeof o === 'object'
+}
+
+export function isBoolean (o: unknown): o is boolean {
+  return o === true || o === false
+}
+
+export function isFunction (o: unknown): o is (...args: any[]) => any {
+  return typeof o === 'function'
+}
+
+export function isNumber (o: unknown): o is number {
+  return typeof o === 'number'
+}
+
+export function isBooleanStringLiteral (o: unknown): o is string {
+  return o === 'true' || o === 'false'
+}
+
+export const isArray = Array.isArray

package/dist/runtime-framework/solid/README.md

@@ -0,0 +1,99 @@
+# Solid 运行时
+
+## reconciler
+
+基于 `solid/universal` 的 Solid 渲染器，连接 `@tarojs/runtime` 的 DOM 实例，相当于小程序版的 `solid-js/web`，暴露的 API 也和 `solid-js/web` 保持一致。
+
+- render
+- effect
+- memo
+- createComponent
+- createElement
+- createTextNode
+- insertNode
+- insert
+- spread
+- setProp
+- mergeProps
+
+需要新增 babel-presets-solid 插件配置，用于转换 SolidJS 的 JSX 语法。
+
+```js
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: true,
+    }],
+    ['babel-preset-solid', {
+      // 指向 SolidJS 的 reconciler
+      moduleName: '@tarojs/plugin-framework-react/dist/runtime/reconciler',
+      generate: 'universal',
+    }]
+  ]
+}
+```
+
+## 附录 1: [可能无法转换/兼容 SolidJS 的 React API 列表](https://github.com/solidjs-community/solid-codemod/issues/2)
+
+### react
+
+- cloneElement - Probably Element.cloneNode, but this highly depends on the usage and only works for DOM nodes not components.
+- createFactory
+- isValidElement - the lack of VDOM makes this impossible, however, instanceof Element can be a valid workaround in some cases.
+- createRef - we can probably create a library shim such that this one exists and still returns the object, but we can convert those ref property usages into a callback assignment e.g. (el) => ref.current = el.
+- forwardRef - Can be removed or provide a library shim, which ever works.
+- memo - There's already a memo function in SolidJS but it behaves differently. We can remove this during compilation since it is totally unnecessary.
+- useReducer - provide a library shim
+- useRef - we can remove this and change VariableDeclaration, but that also requires current property accesses.
+- useLayoutEffect - I'm not sure if createRenderEffect can replace this.
+- useImperativeHandle - library shim
+- useCallback - can be removed
+- useDebugValue - statement can be removed.
+- useDeferredValue - Now this one is highly different from createDeferred. We'll probably need Ryan's consultation.
+- Mutable Sources - library shim
+- useInsertionEffect - I'm not sure what this is, but I believe it is discussed in the <style> guide for React in the working group
+- useSyncExternalStore - library shim
+- Fragment - library shim, but I think I've suggested Ryan to add this one into the SolidJS core.
+
+### react-dom
+
+- findDOMNode
+- unmountComponentAtNode - This one's impossible.
+- flushSync - not sure what this is for, probably for flushing updates.
+- unstable_renderSubtreeIntoContainer - I think this one was used in React Server Components, but given we don't have VDOM, this one's impossible.
+- unstable_scheduleHydration
+- unstable_flushControlled
+
+## 附录 2: React 与 SolidJS 写法差异
+
+> 参考：[solid-reactor](https://github.com/yellowsink/solid-reactor)
+
+### API
+
+- `useState` => `createSignal`
+- `useEffect` => `createEffect`
+  - attempting to recreate the "run on every rerender" behaviour
+- `useReducer` => `createSignal` + a function
+- `useRef` => `{ current: <value> }` + a variable
+  - convert (useRef-returned only) refs in `ref={myRef}` to `ref={myRef.current}`.
+
+### 样式
+
+- camelCase(`marginRight`) => kebab-case(`margin-right`)
+
+React.useRef => createSignal
+React.createRef => createSignal
+React.useLayoutEffect => [createRenderEffect, onCleanup]
+React.useMemo => createMemo
+ReactDOM.unstable_batchedUpdates => batch
+
+React.Component => renderer.createComponent
+ReactDOM.render => renderer.render
+h => React.createElement => renderer.createElement
+
+ReactDOM.findDOMNode
+
+createRoot
+createContext
+useContext

package/dist/runtime-framework/solid/app.ts

@@ -0,0 +1,200 @@
+import { Current, document } from '@tarojs/runtime'
+import { hooks, isWebPlatform } from '@tarojs/shared'
+import { batch, createContext, createRoot, createSignal, For } from 'solid-js'
+
+import { setReconciler } from './connect'
+import { getPageInstance, injectPageInstance } from './page'
+import { createComponent, h, render } from './reconciler'
+import { EMPTY_OBJ, HOOKS_APP_ID, setDefaultDescriptor, setRouterParams } from './utils'
+
+import type { AppInstance, Instance, PageLifeCycle, PageProps, ReactAppInstance } from '@tarojs/runtime'
+import type { AppConfig } from '@tarojs/taro'
+import type { Component } from './connect'
+
+const isWeb = isWebPlatform()
+
+export const ReactMeta = {
+  R: EMPTY_OBJ,
+  Container: EMPTY_OBJ,
+  PageContext: EMPTY_OBJ
+}
+
+export function createSolidApp(App: Component, config: AppConfig) {
+  setReconciler()
+
+  if (ReactMeta.PageContext === EMPTY_OBJ) {
+    ReactMeta.PageContext = createContext<string>()
+  }
+
+  let appRef: ReactAppInstance
+  function getAppInstance(): any {
+    return appRef
+  }
+
+  function renderReactRoot() {
+    let appId = 'app'
+    if (isWeb) {
+      appId = config?.appId || appId
+    }
+
+    if (ReactMeta.Container === EMPTY_OBJ) {
+      const Container = document.createElement('view')
+
+      Container.id = appId
+      ReactMeta.Container = Container
+    }
+
+    const root = createRoot(() => ReactMeta.Container)
+    render(AppWrapper, root)
+  }
+  const [pages, setPages] = createSignal<any[]>([])
+
+  function AppWrapper () {
+    appRef = {} as unknown as ReactAppInstance
+    return createComponent(App, {
+      children: createComponent(For as unknown as Component, {
+        get each() {
+          return pages()
+        },
+        children: ({ id, component }) => {
+          const children = () =>
+            createComponent(ReactMeta.PageContext.Provider as unknown as Component, {
+              value: id,
+              children: () => {
+                injectPageInstance(
+                  { id: id, type: 'page' } as unknown as Instance<PageProps>,
+                  id
+                )
+                return createComponent(component, {
+                  tid: id,
+                })
+              },
+            })
+
+          if (isWeb) {
+            return h('div', { id, className: 'taro_page' }, children)
+          } else {
+            return h('root', { id }, children)
+          }
+        },
+      }),
+    })
+  }
+
+  if (!isWeb) {
+    renderReactRoot()
+  }
+
+  const [ONLAUNCH, ONSHOW, ONHIDE] = hooks.call('getMiniLifecycleImpl')!.app
+
+  const appObj: AppInstance = Object.create(
+    {
+      mount(component: Component, id: string, cb: () => void) {
+        setPages((old) => [
+          ...old,
+          { id, component },
+        ])
+        batch(cb)
+      },
+
+      unmount(id: string, cb: () => void) {
+        setPages(
+          pages().filter((item) => {
+            return item.id !== id
+          })
+        )
+        batch(cb)
+      },
+    },
+    {
+      config: setDefaultDescriptor({
+        configurable: true,
+        value: config,
+      }),
+
+      [ONLAUNCH]: setDefaultDescriptor({
+        value(options) {
+          setRouterParams(options)
+
+          if (isWeb) {
+            // 由于 H5 路由初始化的时候会清除 app 下的 dom 元素，所以需要在路由初始化后执行 render
+            renderReactRoot()
+          }
+
+          const onLaunch = () => {
+            const app = getAppInstance()
+
+            if (app) {
+              // 把 App Class 上挂载的额外属性同步到全局 app 对象中
+              if (app.taroGlobalData) {
+                const globalData = app.taroGlobalData
+                const keys = Object.keys(globalData)
+                const descriptors = Object.getOwnPropertyDescriptors(globalData)
+                keys.forEach(key => {
+                  Object.defineProperty(this, key, {
+                    configurable: true,
+                    enumerable: true,
+                    get () {
+                      return globalData[key]
+                    },
+                    set (value) {
+                      globalData[key] = value
+                    }
+                  })
+                })
+                Object.defineProperties(this, descriptors)
+              }
+
+              app.onCreate?.()
+            }
+          }
+
+          onLaunch()
+          triggerAppHook('onLaunch', options)
+        },
+      }),
+
+      [ONSHOW]: setDefaultDescriptor({
+        value(options) {
+          setRouterParams(options)
+          triggerAppHook('onShow', options)
+        },
+      }),
+
+      [ONHIDE]: setDefaultDescriptor({
+        value() {
+          triggerAppHook('onHide')
+        },
+      }),
+
+      onError: setDefaultDescriptor({
+        value(error: string) {
+          triggerAppHook('onError', error)
+        },
+      }),
+
+      onPageNotFound: setDefaultDescriptor({
+        value(res: unknown) {
+          triggerAppHook('onPageNotFound', res)
+        },
+      }),
+    }
+  )
+
+  function triggerAppHook(
+    lifecycle: keyof PageLifeCycle | keyof AppInstance,
+    ...option
+  ) {
+    const instance = getPageInstance(HOOKS_APP_ID)
+    if (instance) {
+      const app = getAppInstance()
+      const func = hooks.call('getLifecycle', instance, lifecycle)
+      if (Array.isArray(func)) {
+        func.forEach((cb) => cb.apply(app, option))
+      }
+    }
+  }
+
+  Current.app = appObj
+  return appObj
+}

package/dist/runtime-framework/solid/connect.ts

@@ -0,0 +1,11 @@
+import { TaroNode } from '@tarojs/runtime'
+import { hooks } from '@tarojs/shared'
+import { batch } from 'solid-js'
+
+export type Component = (props?: any) => TaroNode
+
+export function setReconciler() {
+  hooks.tap('batchedEventUpdates', function (cb) {
+    batch(cb)
+  })
+}

package/dist/runtime-framework/solid/contant.ts

@@ -0,0 +1,5 @@
+export const ON_SHOW = 'onShow'
+export const ON_HIDE = 'onHide'
+export const ON_LOAD = 'onLoad'
+export const ON_UNLOAD = 'onUnload'
+export const ON_READY = 'onReady'

package/dist/runtime-framework/solid/hooks.ts

@@ -0,0 +1,88 @@
+import {
+  AppInstance,
+  Current,
+  Func,
+  PageLifeCycle
+} from '@tarojs/runtime'
+import { isArray, isFunction } from '@tarojs/shared'
+import {
+  createMemo,
+  createRenderEffect,
+  onCleanup,
+} from 'solid-js'
+
+import { ReactMeta } from './app'
+import { getPageInstance, injectPageInstance } from './page'
+import { HOOKS_APP_ID } from './utils'
+
+const createTaroHook = (lifecycle: keyof PageLifeCycle | keyof AppInstance) => {
+  return (fn: Func) => {
+    const id = ReactMeta.PageContext || HOOKS_APP_ID
+
+    createRenderEffect(() => {
+      let inst = getPageInstance(id)
+      let first = false
+      if (!inst) {
+        first = true
+        inst = Object.create({
+          id: id,
+          type: 'page',
+        })
+      }
+
+      if (isFunction(inst![lifecycle])) {
+        inst![lifecycle] = [inst?.[lifecycle], fn]
+      } else {
+        inst![lifecycle] = [...(inst![lifecycle] || []), fn]
+      }
+
+      if (first) {
+        injectPageInstance(inst!, id)
+      }
+
+      onCleanup(() => {
+        const list = inst![lifecycle]
+        if (list === fn) {
+          inst![lifecycle] = undefined
+        } else if (isArray(list)) {
+          inst![lifecycle] = list.filter((item) => item !== fn)
+        }
+      })
+    })
+  }
+}
+
+/** LifeCycle */
+export const useDidHide = createTaroHook('componentDidHide')
+export const useDidShow = createTaroHook('componentDidShow')
+
+/** App */
+export const useError = createTaroHook('onError')
+export const useLaunch = createTaroHook('onLaunch')
+export const usePageNotFound = createTaroHook('onPageNotFound')
+
+/** Page */
+export const useLoad = createTaroHook('onLoad')
+export const usePageScroll = createTaroHook('onPageScroll')
+export const usePullDownRefresh = createTaroHook('onPullDownRefresh')
+export const usePullIntercept = createTaroHook('onPullIntercept')
+export const useReachBottom = createTaroHook('onReachBottom')
+export const useResize = createTaroHook('onResize')
+export const useUnload = createTaroHook('onUnload')
+
+/** Mini-Program */
+export const useAddToFavorites = createTaroHook('onAddToFavorites')
+export const useOptionMenuClick = createTaroHook('onOptionMenuClick')
+export const useSaveExitState = createTaroHook('onSaveExitState')
+export const useShareAppMessage = createTaroHook('onShareAppMessage')
+export const useShareTimeline = createTaroHook('onShareTimeline')
+export const useTitleClick = createTaroHook('onTitleClick')
+
+/** Router */
+export const useReady = createTaroHook('onReady')
+export const useRouter = (dynamic = false) => {
+  return dynamic ? Current.router : createMemo(() => Current.router)
+}
+export const useTabItemTap = createTaroHook('onTabItemTap')
+
+export const useScope = () => undefined

package/dist/runtime-framework/solid/index.ts

@@ -0,0 +1,10 @@
+import { hooks } from '@tarojs/shared'
+
+// declare const __TARO_FRAMEWORK__: string;
+
+hooks.tap('initNativeApi', function (_taro) {})
+
+export * from './app'
+export * from './connect'
+export * from './hooks'
+export * from './page'

package/dist/runtime-framework/solid/page.ts

@@ -0,0 +1,202 @@
+import { Current } from '@tarojs/runtime'
+import { isArray, isFunction, isUndefined } from '@tarojs/shared'
+
+import { ON_HIDE, ON_LOAD, ON_READY, ON_SHOW, ON_UNLOAD } from './contant'
+import { incrementId } from './utils'
+
+// TODO TYPE
+const instances = new Map<string, any>()
+const pageId = incrementId()
+
+// TODO TYPE
+export function injectPageInstance (inst: any, id: string) {
+  instances.set(id, inst)
+}
+
+// TODO TYPE
+export function getPageInstance (id: string): any {
+  return instances.get(id)
+}
+
+export function removePageInstance (id: string) {
+  instances.delete(id)
+}
+
+export function addLeadingSlash (path?: string): string {
+  if (path == null) {
+    return ''
+  }
+  return path.charAt(0) === '/' ? path : '/' + path
+}
+
+export function safeExecute (path: string, lifecycle: string, ...args: unknown[]) {
+  const instance = instances.get(path)
+
+  if (instance == null) {
+    return
+  }
+
+  const func = instance[lifecycle]
+
+  if (isArray(func)) {
+    const res = func.map(fn => fn.apply(instance, args))
+    return res[0]
+  }
+
+  if (!isFunction(func)) {
+    return
+  }
+
+  return func.apply(instance, args)
+}
+
+export function stringify (obj?: Record<string, unknown>) {
+  if (obj == null) {
+    return ''
+  }
+  const path = Object.keys(obj).map((key) => {
+    return key + '=' + obj[key]
+  }).join('&')
+  return path === '' ? path : '?' + path
+}
+
+export function getPath (id: string, options?: Record<string, unknown>): string {
+  const idx = id.indexOf('?')
+
+  return `${idx > -1 ? id.substring(0, idx) : id}${stringify(options)}`
+}
+
+export function getOnReadyEventKey (path: string) {
+  return path + '.' + ON_READY
+}
+
+export function getOnShowEventKey (path: string) {
+  return path + '.' + ON_SHOW
+}
+
+export function getOnHideEventKey (path: string) {
+  return path + '.' + ON_HIDE
+}
+
+export function createPageConfig (component: any, pageName?: string) {
+  // 小程序 Page 构造器是一个傲娇小公主，不能把复杂的对象挂载到参数上
+  const id = pageName ?? `taro_page_${pageId()}`
+  // TODO TYPE
+  let pageElement: any = null
+  let unmounting = false
+  let prepareMountList: (() => void)[] = []
+
+  // TODO TYPE
+  function setCurrentRouter (page) {
+    const router = page.route || page.__route__ || page.$taroPath
+
+    Current.router = {
+      params: page.$taroParams!,
+      path: addLeadingSlash(router),
+      $taroPath: page.$taroPath,
+      onReady: getOnReadyEventKey(id),
+      onShow: getOnShowEventKey(id),
+      onHide: getOnHideEventKey(id)
+    }
+
+    if (!isUndefined(page.exitState)) {
+      Current.router.exitState = page.exitState
+    }
+  }
+
+  let loadResolver: (...args: any[]) => void
+  let hasLoaded: Promise<void>
+  const page = {
+    onLoad (options: Readonly<Record<string, unknown>> = {}, cb?: (...args: any[]) => any) {
+      hasLoaded = new Promise(resolve => { loadResolver = resolve })
+
+      Current.page = this as any
+
+      // this.$taroPath 是页面唯一标识
+      const uniqueOptions = Object.assign({}, options, { $taroTimestamp: Date.now() })
+      const $taroPath = this.$taroPath = getPath(id, uniqueOptions)
+
+      // this.$taroParams 作为暴露给开发者的页面参数对象，可以被随意修改
+      if (this.$taroParams == null) {
+        this.$taroParams = uniqueOptions
+      }
+
+      setCurrentRouter(this)
+
+      // window.trigger(CONTEXT_ACTIONS.INIT, $taroPath)
+
+      const mount = () => {
+        Current.app!.mount!(component, $taroPath, () => {
+          // TODO TYPE env
+          // pageElement = document.getElementById($taroPath)
+
+          // if (!pageElement) {
+          //   throw new Error(`没有找到页面实例。`)
+          // }
+
+          safeExecute($taroPath, ON_LOAD, this.$taroParams)
+          loadResolver()
+          cb && cb()
+          // pageElement.ctx = this
+          // pageElement.performUpdate(true, cb)
+        })
+      }
+
+      if (unmounting) {
+        prepareMountList.push(mount)
+      } else {
+        mount()
+      }
+    },
+    onUnLoad () {
+      const $taroPath = this.$taroPath
+      // 销毁当前页面的上下文信息
+      // window.trigger(CONTEXT_ACTIONS.DESTORY, $taroPath)
+
+      // 触发onUnload生命周期
+      safeExecute($taroPath, ON_UNLOAD)
+      unmounting = true
+      Current.app!.unmount!($taroPath, () => {
+        unmounting = false
+        instances.delete($taroPath)
+        if (pageElement) {
+          pageElement.ctx = null
+          pageElement = null
+        }
+        if (prepareMountList.length) {
+          prepareMountList.forEach(fn => fn())
+          prepareMountList = []
+        }
+      })
+    },
+    onShow (options = {}) {
+      hasLoaded.then(() => {
+        // 设置 Current 的 page 和 router
+        Current.page = this as any
+        setCurrentRouter(this)
+        // 恢复上下文信息
+        // window.trigger(CONTEXT_ACTIONS.RECOVER, this.$taroPath)
+        // 触发生命周期
+        safeExecute(this.$taroPath, ON_SHOW, options)
+        // TODO 通过事件触发子组件的生命周期
+        // raf(() => eventCenter.trigger(getOnShowEventKey(id)))
+      })
+    },
+    onHide () {
+      // 缓存当前页面上下文信息
+      // window.trigger(CONTEXT_ACTIONS.RESTORE, this.$taroPath)
+
+      // 设置 Current 的 page 和 router
+      if (Current.page === this) {
+        Current.page = null
+        Current.router = null
+      }
+      // 触发生命周期
+      safeExecute(this.$taroPath, ON_HIDE)
+      // TODO 通过事件触发子组件的生命周期
+      // eventCenter.trigger(getOnHideEventKey(id))
+    }
+  }
+
+  return page
+}