fix: 添加solid的taro-components的类型定义 & solid的默认模板配置 & createStore api开发环…

…境下报错的问题 (#16358)

* types: 添加solid的taro-components的类型定义

* feat: solid默认模板添加@tarojs/components类型定义

* fix: 修复solid使用不了createStore DEV丢失问题

packages/taro-cli/templates/default/template_creator.js

@@ -17,6 +17,9 @@ const handler = {
   '/types/vue.d.ts' (err, { framework, typescript }) {
     return ['Vue3'].includes(framework) && !!typescript
   },
+  '/types/solid.d.ts' (err, { framework, typescript }) {
+    return ['Solid'].includes(framework) && !!typescript
+  },
   '/src/pages/index/index.jsx' (err, { pageDir = '', pageName = '', subPkg = '' }) {
     return {
       setPageName: normalizePath(path.join(PAGES_ENTRY, pageDir, pageName, 'index.jsx')),

packages/taro-cli/templates/default/tsconfig.json

@@ -14,9 +14,10 @@
     "strictNullChecks": true,
     "sourceMap": true,
     "rootDir": ".",
-    "jsx": "{{#if (includes "Vue3" s=framework)}}preserve{{else}}react-jsx{{/if}}",{{#if (eq framework "Preact") }}
+    "jsx": "{{#if (includes "Vue3" s=framework)}}preserve{{else if (eq framework 'Solid')}}preserve{{else}}react-jsx{{/if}}",{{#if (eq framework "Preact") }}
     "skipLibCheck": true,{{/if}}
-    "allowJs": true,
+    "allowJs": true,{{#if (eq framework "Solid")}}
+    "jsxImportSource": "solid-js",{{/if}}
     "resolveJsonModule": true,
     "typeRoots": [
       "node_modules/@types"

packages/taro-cli/templates/default/types/global.d.ts

@@ -29,4 +29,7 @@ declare namespace NodeJS {
 {{#if (includes "Vue3" s=framework)}}
 declare module '@tarojs/components' {
   export * from '@tarojs/components/types/index.vue3'
+}{{else if (includes "Solid" s=framework)}}
+declare module '@tarojs/components' {
+  export * from '@tarojs/components/types/index.solid'
 }{{/if}}

packages/taro-cli/templates/default/types/solid.d.ts

@@ -0,0 +1,12 @@
+export { }
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface Directives {
+      /** Note:如果需要定义自定义指令的类型，可以在这里做
+       * 参考官网文档https://docs.solidjs.com/reference/jsx-attributes/use
+       * model: [() => any, (v: any) => any]
+       */
+    }
+  }
+}

packages/taro-components/types/index.solid.d.ts

@@ -0,0 +1,297 @@
+import { JSX, JSXElement } from 'solid-js'
+import { TaroElement } from '@tarojs/runtime'
+import { AdProps } from '@tarojs/components/types/Ad'
+import { AdCustomProps } from '@tarojs/components/types/AdCustom'
+import { AudioProps } from '@tarojs/components/types/Audio'
+import { ButtonProps } from '@tarojs/components/types/Button'
+import { CameraProps } from '@tarojs/components/types/Camera'
+import { CanvasProps } from '@tarojs/components/types/Canvas'
+import { ChannelLiveProps } from '@tarojs/components/types/ChannelLive'
+import { ChannelVideoProps } from '@tarojs/components/types/ChannelVideo'
+import { CheckboxProps } from '@tarojs/components/types/Checkbox'
+import { CheckboxGroupProps } from '@tarojs/components/types/CheckboxGroup'
+import { StandardProps } from '@tarojs/components/types/common'
+import { CoverImageProps } from '@tarojs/components/types/CoverImage'
+import { CoverViewProps } from '@tarojs/components/types/CoverView'
+import { CustomWrapperProps } from '@tarojs/components/types/CustomWrapper'
+import { EditorProps } from '@tarojs/components/types/Editor'
+import { FormProps } from '@tarojs/components/types/Form'
+import { FunctionalPageNavigatorProps } from '@tarojs/components/types/FunctionalPageNavigator'
+import { GridViewProps } from '@tarojs/components/types/GridView'
+import { IconProps } from '@tarojs/components/types/Icon'
+import { ImageProps } from '@tarojs/components/types/Image'
+import { InputProps } from '@tarojs/components/types/Input'
+import { KeyboardAccessoryProps } from '@tarojs/components/types/KeyboardAccessory'
+import { LabelProps } from '@tarojs/components/types/Label'
+import { ListViewProps } from '@tarojs/components/types/ListView'
+import { LivePlayerProps } from '@tarojs/components/types/LivePlayer'
+import { LivePusherProps } from '@tarojs/components/types/LivePusher'
+import { MapProps } from '@tarojs/components/types/Map'
+import { MatchMediaProps } from '@tarojs/components/types/MatchMedia'
+import { MovableAreaProps } from '@tarojs/components/types/MovableArea'
+import { MovableViewProps } from '@tarojs/components/types/MovableView'
+import { NativeSlotProps } from '@tarojs/components/types/NativeSlot'
+import { NavigationBarProps } from '@tarojs/components/types/NavigationBar'
+import { NavigatorProps } from '@tarojs/components/types/Navigator'
+import { OfficialAccountProps } from '@tarojs/components/types/OfficialAccount'
+import { OpenDataProps } from '@tarojs/components/types/OpenData'
+import { PageContainerProps } from '@tarojs/components/types/PageContainer'
+import { PageMetaProps } from '@tarojs/components/types/PageMeta'
+import {
+  PickerDateProps, PickerMultiSelectorProps,
+  PickerRegionProps, PickerSelectorProps, PickerTimeProps
+} from '@tarojs/components/types/Picker'
+import { PickerViewProps } from '@tarojs/components/types/PickerView'
+import { PickerViewColumnProps } from '@tarojs/components/types/PickerViewColumn'
+import { ProgressProps } from '@tarojs/components/types/Progress'
+import { RadioProps } from '@tarojs/components/types/Radio'
+import { RadioGroupProps } from '@tarojs/components/types/RadioGroup'
+import { RichTextProps } from '@tarojs/components/types/RichText'
+import { RootPortalProps } from '@tarojs/components/types/RootPortal'
+import { ScrollViewProps } from '@tarojs/components/types/ScrollView'
+import { ShareElementProps } from '@tarojs/components/types/ShareElement'
+import { SliderProps } from '@tarojs/components/types/Slider'
+import { SlotProps } from '@tarojs/components/types/Slot'
+import { SnapshotProps } from '@tarojs/components/types/SnapShot'
+import { StickyHeaderProps } from '@tarojs/components/types/StickyHeader'
+import { StickySectionProps } from '@tarojs/components/types/StickySection'
+import { SwiperProps } from '@tarojs/components/types/Swiper'
+import { SwiperItemProps } from '@tarojs/components/types/SwiperItem'
+import { SwitchProps } from '@tarojs/components/types/Switch'
+import { TextProps } from '@tarojs/components/types/Text'
+import { TextareaProps } from '@tarojs/components/types/Textarea'
+import { VideoProps } from '@tarojs/components/types/Video'
+import { ViewProps } from '@tarojs/components/types/View'
+import { VoipRoomProps } from '@tarojs/components/types/VoipRoom'
+import { WebViewProps } from '@tarojs/components/types/WebView'
+
+// 重置react的类型
+interface SlimProps {
+  children?: JSXElement
+  class?: string
+  style?: string | JSX.CSSProperties | undefined
+  innerHTML?: string
+}
+/** 联合类型不能用omit（比如picker） */
+type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never
+
+export type RemoveReactAttribute = 'children' | 'className' | 'style' | 'key' | 'ref' | 'dangerouslySetInnerHTML'
+
+export type TransformReact2SolidType<P extends StandardProps = Record<string, never>> = DistributiveOmit<P, RemoveReactAttribute> & SlimProps & JSX.DirectiveAttributes & JSX.CustomAttributes<TaroElement>
+
+type Components<T> = (props: TransformReact2SolidType<T>) => JSXElement;
+
+
+/** 视图容器 */
+export declare const Block: Components<StandardProps>
+export declare const CoverImage: Components<CoverImageProps>
+export declare const CoverView: Components<CoverViewProps>
+export declare const GridView: Components<GridViewProps>
+export declare const ListView: Components<ListViewProps>
+export declare const MatchMedia: Components<MatchMediaProps>
+export declare const MovableArea: Components<MovableAreaProps>
+export declare const MovableView: Components<MovableViewProps>
+export declare const PageContainer: Components<PageContainerProps>
+export declare const RootPortal: Components<RootPortalProps>
+export declare const ScrollView: Components<ScrollViewProps>
+export declare const ShareElement: Components<ShareElementProps>
+export declare const StickyHeader: Components<StickyHeaderProps>
+export declare const StickySection: Components<StickySectionProps>
+export declare const Swiper: Components<SwiperProps>
+export declare const SwiperItem: Components<SwiperItemProps>
+export declare const View: Components<ViewProps>
+/** 基础内容 */
+export declare const Icon: Components<IconProps>
+export declare const Progress: Components<ProgressProps>
+export declare const RichText: Components<RichTextProps>
+export declare const Text: Components<TextProps>
+/** 表单组件 */
+export declare const Button: Components<ButtonProps>
+export declare const Checkbox: Components<CheckboxProps>
+export declare const CheckboxGroup: Components<CheckboxGroupProps>
+export declare const Editor: Components<EditorProps>
+export declare const Form: Components<FormProps>
+export declare const Input: Components<InputProps>
+export declare const KeyboardAccessory: Components<KeyboardAccessoryProps>
+export declare const Label: Components<LabelProps>
+export declare const Picker: Components<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>
+export declare const PickerView: Components<PickerViewProps>
+export declare const PickerViewColumn: Components<PickerViewColumnProps>
+export declare const Radio: Components<RadioProps>
+export declare const RadioGroup: Components<RadioGroupProps>
+export declare const Slider: Components<SliderProps>
+export declare const Switch: Components<SwitchProps>
+export declare const Textarea: Components<TextareaProps>
+/** 导航 */
+export declare const FunctionalPageNavigator: Components<FunctionalPageNavigatorProps>
+export declare const Navigator: Components<NavigatorProps>
+export declare const NavigationBar: Components<NavigationBarProps>
+/** 媒体组件 */
+export declare const Audio: Components<AudioProps>
+export declare const Camera: Components<CameraProps>
+export declare const ChannelLive: Components<ChannelLiveProps>
+export declare const ChannelVideo: Components<ChannelVideoProps>
+export declare const Image: Components<ImageProps>
+export declare const LivePlayer: Components<LivePlayerProps>
+export declare const LivePusher: Components<LivePusherProps>
+export declare const Video: Components<VideoProps>
+export declare const VoipRoom: Components<VoipRoomProps>
+/** 地图 */
+export declare const Map: Components<MapProps>
+/** 画布 */
+export declare const Canvas: Components<CanvasProps>
+/** 开放能力 */
+export declare const Ad: Components<AdProps>
+export declare const AdCustom: Components<AdCustomProps>
+export declare const OfficialAccount: Components<OfficialAccountProps>
+export declare const OpenData: Components<OpenDataProps>
+export declare const WebView: Components<WebViewProps>
+/** 配置节点 */
+export declare const PageMeta: Components<PageMetaProps>
+
+export declare const CustomWrapper: Components<CustomWrapperProps>
+export declare const Slot: Components<SlotProps>
+export declare const NativeSlot: Components<NativeSlotProps>
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      /** 视图容器 */
+      block: TransformReact2SolidType<StandardProps>
+      'taro-block-core': TransformReact2SolidType<StandardProps>
+      'cover-image': TransformReact2SolidType<CoverImageProps>
+      'taro-cover-image-core': TransformReact2SolidType<CoverImageProps>
+      'cover-view': TransformReact2SolidType<CoverViewProps>
+      'taro-cover-view-core': TransformReact2SolidType<CoverViewProps>
+      'match-media': TransformReact2SolidType<MatchMediaProps>
+      'taro-match-media-core': TransformReact2SolidType<MatchMediaProps>
+      'movable-area': TransformReact2SolidType<MovableAreaProps>
+      'taro-movable-area-core': TransformReact2SolidType<MovableAreaProps>
+      'movable-view': TransformReact2SolidType<MovableViewProps>
+      'taro-movable-view-core': TransformReact2SolidType<MovableViewProps>
+      'page-container': TransformReact2SolidType<PageContainerProps>
+      'taro-page-container-core': TransformReact2SolidType<PageContainerProps>
+      'root-portal': TransformReact2SolidType<RootPortalProps>
+      'taro-root-portal-core': TransformReact2SolidType<RootPortalProps>
+      'scroll-view': TransformReact2SolidType<ScrollViewProps>
+      'taro-scroll-view-core': TransformReact2SolidType<ScrollViewProps>
+      swiper: TransformReact2SolidType<SwiperProps>
+      'taro-swiper-core': TransformReact2SolidType<SwiperProps>
+      'swiper-item': TransformReact2SolidType<SwiperItemProps>
+      'taro-swiper-item-core': TransformReact2SolidType<SwiperItemProps>
+      view: TransformReact2SolidType<ViewProps>
+      'taro-view-core': TransformReact2SolidType<ViewProps>
+      /** 基础内容 */
+      icon: TransformReact2SolidType<IconProps>
+      'taro-icon-core': TransformReact2SolidType<IconProps>
+      progress: TransformReact2SolidType<ProgressProps>
+      'taro-progress-core': TransformReact2SolidType<ProgressProps>
+      'rich-text': TransformReact2SolidType<RichTextProps>
+      'taro-rich-text-core': TransformReact2SolidType<RichTextProps>
+      text: TransformReact2SolidType<TextProps>
+      'taro-text-core': TransformReact2SolidType<TextProps>
+      /** 表单组件 */
+      button: TransformReact2SolidType<ButtonProps>
+      'taro-button-core': TransformReact2SolidType<ButtonProps>
+      checkbox: TransformReact2SolidType<CheckboxProps>
+      'taro-checkbox-core': TransformReact2SolidType<CheckboxProps>
+      'checkbox-group': TransformReact2SolidType<CheckboxGroupProps>
+      'taro-checkbox-group-core': TransformReact2SolidType<CheckboxGroupProps>
+      editor: TransformReact2SolidType<EditorProps>
+      'taro-editor-core': TransformReact2SolidType<EditorProps>
+      form: TransformReact2SolidType<FormProps>
+      'taro-form-core': TransformReact2SolidType<FormProps>
+      input: TransformReact2SolidType<InputProps>
+      'taro-input-core': TransformReact2SolidType<InputProps>
+      'keyboard-accessory': TransformReact2SolidType<KeyboardAccessoryProps>
+      'taro-keyboard-accessory-core': TransformReact2SolidType<KeyboardAccessoryProps>
+      label: TransformReact2SolidType<LabelProps>
+      'taro-label-core': TransformReact2SolidType<LabelProps>
+      picker: TransformReact2SolidType<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>
+      'taro-picker-core': TransformReact2SolidType<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>
+      'picker-view': TransformReact2SolidType<PickerViewProps>
+      'taro-picker-view-core': TransformReact2SolidType<PickerViewProps>
+      'picker-view-column': TransformReact2SolidType<PickerViewColumnProps>
+      'taro-picker-view-column-core': TransformReact2SolidType<PickerViewColumnProps>
+      radio: TransformReact2SolidType<RadioProps>
+      'taro-radio-core': TransformReact2SolidType<RadioProps>
+      'radio-group': TransformReact2SolidType<RadioGroupProps>
+      'taro-radio-group-core': TransformReact2SolidType<RadioGroupProps>
+      slider: TransformReact2SolidType<SliderProps>
+      'taro-slider-core': TransformReact2SolidType<SliderProps>
+      switch: TransformReact2SolidType<SwitchProps>
+      'taro-switch-core': TransformReact2SolidType<SwitchProps>
+      textarea: TransformReact2SolidType<TextareaProps>
+      'taro-textarea-core': TransformReact2SolidType<TextareaProps>
+      /** Skyline */
+      'grid-view': TransformReact2SolidType<GridViewProps>
+      'taro-grid-view-core': TransformReact2SolidType<GridViewProps>
+      'list-view': TransformReact2SolidType<ListViewProps>
+      'taro-list-view-core': TransformReact2SolidType<ListViewProps>
+      'share-element': TransformReact2SolidType<ShareElementProps>
+      'taro-share-element-core': TransformReact2SolidType<ShareElementProps>
+      'snapshot': TransformReact2SolidType<SnapshotProps>
+      'taro-snapshot-core': TransformReact2SolidType<SnapshotProps>
+      'sticky-header': TransformReact2SolidType<StickyHeaderProps>
+      'taro-sticky-header-core': TransformReact2SolidType<StickyHeaderProps>
+      'sticky-section': TransformReact2SolidType<StickySectionProps>
+      'taro-sticky-section-core': TransformReact2SolidType<StickySectionProps>
+      /** 导航 */
+      'functional-page-navigator': TransformReact2SolidType<FunctionalPageNavigatorProps>
+      'taro-functional-page-navigator-core': TransformReact2SolidType<FunctionalPageNavigatorProps>
+      navigator: TransformReact2SolidType<NavigatorProps>
+      'taro-navigator-core': TransformReact2SolidType<NavigatorProps>
+      'navigation-bar': TransformReact2SolidType<NavigationBarProps>
+      'taro-navigation-bar-core': TransformReact2SolidType<NavigationBarProps>
+      /** 媒体组件 */
+      audio: TransformReact2SolidType<AudioProps>
+      'taro-audio-core': TransformReact2SolidType<AudioProps>
+      camera: TransformReact2SolidType<CameraProps>
+      'taro-camera-core': TransformReact2SolidType<CameraProps>
+      'channel-live': TransformReact2SolidType<ChannelLiveProps>
+      'taro-channel-live-core': TransformReact2SolidType<ChannelLiveProps>
+      'channel-video': TransformReact2SolidType<ChannelVideoProps>
+      'taro-channel-video-core': TransformReact2SolidType<ChannelVideoProps>
+      image: TransformReact2SolidType<ImageProps>
+      'taro-image-core': TransformReact2SolidType<ImageProps>
+      'live-player': TransformReact2SolidType<LivePlayerProps>
+      'taro-live-player-core': TransformReact2SolidType<LivePlayerProps>
+      'live-pusher': TransformReact2SolidType<LivePusherProps>
+      'taro-live-pusher-core': TransformReact2SolidType<LivePusherProps>
+      video: TransformReact2SolidType<VideoProps>
+      'taro-video-core': TransformReact2SolidType<VideoProps>
+      'voip-room': TransformReact2SolidType<VoipRoomProps>
+      'taro-voip-room-core': TransformReact2SolidType<VoipRoomProps>
+      /** 地图 */
+      map: TransformReact2SolidType<MapProps>
+      'taro-map-core': TransformReact2SolidType<MapProps>
+      /** 画布 */
+      canvas: TransformReact2SolidType<CanvasProps>
+      'taro-canvas-core': TransformReact2SolidType<CanvasProps>
+      /** 开放能力 */
+      ad: TransformReact2SolidType<AdProps>
+      'taro-ad-core': TransformReact2SolidType<AdProps>
+      'ad-custom': TransformReact2SolidType<AdCustomProps>
+      'taro-ad-custom-core': TransformReact2SolidType<AdCustomProps>
+      'official-account': TransformReact2SolidType<OfficialAccountProps>
+      'taro-official-account-core': TransformReact2SolidType<OfficialAccountProps>
+      'open-data': TransformReact2SolidType<OpenDataProps>
+      'taro-open-data-core': TransformReact2SolidType<OpenDataProps>
+      'web-view': TransformReact2SolidType<WebViewProps>
+      'taro-web-view-core': TransformReact2SolidType<WebViewProps>
+      /** 配置节点 */
+      'page-meta': TransformReact2SolidType<PageMetaProps>
+      'taro-page-meta-core': TransformReact2SolidType<PageMetaProps>
+
+      'custom-wrapper': TransformReact2SolidType<CustomWrapperProps>
+      'taro-custom-wrapper-core': TransformReact2SolidType<CustomWrapperProps>
+      /** 为了不与vue3模板默认的slot冲突，增加 Record<string, any> */
+      'slot': TransformReact2SolidType<SlotProps> & Record<string, any>
+      'taro-slot-core': TransformReact2SolidType<SlotProps>
+      'native-slot': TransformReact2SolidType<NativeSlotProps>
+      'taro-native-slot-core': TransformReact2SolidType<NativeSlotProps>
+    }
+  }
+}
+
+

packages/taro-framework-solid/src/webpack.mini.ts

@@ -1,5 +1,3 @@
-import { defaultMainFields, resolveSync } from '@tarojs/helper'
-
 import { RECONCILER_NAME } from './constant'
 import { getLoaderMeta } from './loader-meta'
 
@@ -10,14 +8,7 @@ export function modifyMiniWebpackChain (chain) {
 
 function setAlias (chain) {
   const alias = chain.resolve.alias
-  const mainFields = ['unpkg', ...defaultMainFields]
-  const resolveOptions = {
-    basedir: process.cwd(),
-    mainFields,
-  }
   alias.set('solid-js/web$', RECONCILER_NAME)
-  // Note: 本地 link 调试时，避免 solid 重复打包
-  alias.set('solid-js$', resolveSync('solid-js', resolveOptions))
 }
 
 function setLoader (chain) {