🐰 Rax is a progressive React framework for building universal application. https://rax.js.org

背景

• https://github.com/unocss/unocss/blob/main/packages/webpack/README.md

{
  "targets": ["web"],
  "webpack5": true,
  "webpackPlugins": {
    "@unocss/webpack": {}
  }
}

报错

ERR! CONFIG Failed to load webpack config.
ERR! Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].plugins[8] misses the property 'apply'. Should be:
   function
   -> The run point of the plugin, required method.
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].plugins[8] misses the property 'apply'. Should be:
   function
   -> The run point of the plugin, required method.
    at validate (.pnpm/@[email protected]/node_modules/@builder/pack/deps/schema-utils3/index.js:1:153657)
    at validateSchema (.pnpm/@[email protected]/node_modules/@builder/pack/deps/webpack/bundle5.js:151268:2)
    at create (.pnpm/@[email protected]/node_modules/@builder/pack/deps/webpack/bundle5.js:154748:24)
    at webpack (.pnpm/@[email protected]/node_modules/@builder/pack/deps/webpack/bundle5.js:154795:32)
    at f (.pnpm/@[email protected]/node_modules/@builder/pack/deps/webpack/bundle5.js:109940:16)
    at .pnpm/[email protected]/node_modules/build-scripts/lib/service/start.js:56:24
    at Generator.next (<anonymous>)
    at fulfilled (.pnpm/[email protected]/node_modules/build-scripts/lib/service/start.js:5:58)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  errors: [
    {
      keyword: 'anyOf',
      dataPath: '[0].plugins[8]',
      schemaPath: '#/items/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    }
  ],
  schema: {
    definitions: {
      Amd: [Object],
      AssetFilterItemTypes: [Object],
      AssetFilterTypes: [Object],
      AssetGeneratorDataUrl: [Object],
      AssetGeneratorDataUrlFunction: [Object],
      AssetGeneratorDataUrlOptions: [Object],
      AssetGeneratorOptions: [Object],
      AssetInlineGeneratorOptions: [Object],
      AssetModuleFilename: [Object],
      AssetParserDataUrlFunction: [Object],
      AssetParserDataUrlOptions: [Object],
      AssetParserOptions: [Object],
      AssetResourceGeneratorOptions: [Object],
      AuxiliaryComment: [Object],
      Bail: [Object],
      CacheOptions: [Object],
      CacheOptionsNormalized: [Object],
      Charset: [Object],
      ChunkFilename: [Object],
      ChunkFormat: [Object],
      ChunkLoadTimeout: [Object],
      ChunkLoading: [Object],
      ChunkLoadingGlobal: [Object],
      ChunkLoadingType: [Object],
      Clean: [Object],
      CleanOptions: [Object],
      CompareBeforeEmit: [Object],
      Context: [Object],
      CrossOriginLoading: [Object],
      Dependencies: [Object],
      DevServer: [Object],
      DevTool: [Object],
      DevtoolFallbackModuleFilenameTemplate: [Object],
      DevtoolModuleFilenameTemplate: [Object],
      DevtoolNamespace: [Object],
      EmptyGeneratorOptions: [Object],
      EmptyParserOptions: [Object],
      EnabledChunkLoadingTypes: [Object],
      EnabledLibraryTypes: [Object],
      EnabledWasmLoadingTypes: [Object],
      Entry: [Object],
      EntryDescription: [Object],
      EntryDescriptionNormalized: [Object],
      EntryDynamic: [Object],
      EntryDynamicNormalized: [Object],
      EntryFilename: [Object],
      EntryItem: [Object],
      EntryNormalized: [Object],
      EntryObject: [Object],
      EntryRuntime: [Object],
      EntryStatic: [Object],
      EntryStaticNormalized: [Object],
      EntryUnnamed: [Object],
      Environment: [Object],
      Experiments: [Object],
      ExperimentsCommon: [Object],
      ExperimentsNormalized: [Object],
      ExternalItem: [Object],
      ExternalItemFunctionData: [Object],
      ExternalItemValue: [Object],
      Externals: [Object],
      ExternalsPresets: [Object],
      ExternalsType: [Object],
      FileCacheOptions: [Object],
      Filename: [Object],
      FilenameTemplate: [Object],
      FilterItemTypes: [Object],
      FilterTypes: [Object],
      GeneratorOptionsByModuleType: [Object],
      GlobalObject: [Object],
      HashDigest: [Object],
      HashDigestLength: [Object],
      HashFunction: [Object],
      HashSalt: [Object],
      HotUpdateChunkFilename: [Object],
      HotUpdateGlobal: [Object],
      HotUpdateMainFilename: [Object],
      HttpUriAllowedUris: [Object],
      HttpUriOptions: [Object],
      HttpUriOptionsAllowedUris: [Object],
      IgnoreWarnings: [Object],
      IgnoreWarningsNormalized: [Object],
      Iife: [Object],
      ImportFunctionName: [Object],
      ImportMetaName: [Object],
      InfrastructureLogging: [Object],
      JavascriptParserOptions: [Object],
      Layer: [Object],
      LazyCompilationDefaultBackendOptions: [Object],
      LazyCompilationOptions: [Object],
      Library: [Object],
      LibraryCustomUmdCommentObject: [Object],
      LibraryCustomUmdObject: [Object],
      LibraryExport: [Object],
      LibraryName: [Object],
      LibraryOptions: [Object],
      LibraryType: [Object],
      Loader: [Object],
      MemoryCacheOptions: [Object],
      Mode: [Object],
      ModuleFilterItemTypes: [Object],
      ModuleFilterTypes: [Object],
      ModuleOptions: [Object],
      ModuleOptionsNormalized: [Object],
      Name: [Object],
      NoParse: [Object],
      Node: [Object],
      NodeOptions: [Object],
      Optimization: [Object],
      OptimizationRuntimeChunk: [Object],
      OptimizationRuntimeChunkNormalized: [Object],
      OptimizationSplitChunksCacheGroup: [Object],
      OptimizationSplitChunksGetCacheGroups: [Object],
      OptimizationSplitChunksOptions: [Object],
      OptimizationSplitChunksSizes: [Object],
      Output: [Object],
      OutputModule: [Object],
      OutputNormalized: [Object],
      Parallelism: [Object],
      ParserOptionsByModuleType: [Object],
      Path: [Object],
      Pathinfo: [Object],
      Performance: [Object],
      PerformanceOptions: [Object],
      Plugins: [Object],
      Profile: [Object],
      PublicPath: [Object],
      RawPublicPath: [Object],
      RecordsInputPath: [Object],
      RecordsOutputPath: [Object],
      RecordsPath: [Object],
      Resolve: [Object],
      ResolveAlias: [Object],
      ResolveLoader: [Object],
      ResolveOptions: [Object],
      ResolvePluginInstance: [Object],
      RuleSetCondition: [Object],
      RuleSetConditionAbsolute: [Object],
      RuleSetConditionOrConditions: [Object],
      RuleSetConditionOrConditionsAbsolute: [Object],
      RuleSetConditions: [Object],
      RuleSetConditionsAbsolute: [Object],
      RuleSetLoader: [Object],
      RuleSetLoaderOptions: [Object],
      RuleSetLogicalConditions: [Object],
      RuleSetLogicalConditionsAbsolute: [Object],
      RuleSetRule: [Object],
      RuleSetRules: [Object],
      RuleSetUse: [Object],
      RuleSetUseItem: [Object],
      ScriptType: [Object],
      SnapshotOptions: [Object],
      SourceMapFilename: [Object],
      SourcePrefix: [Object],
      StatsOptions: [Object],
      StatsValue: [Object],
      StrictModuleErrorHandling: [Object],
      StrictModuleExceptionHandling: [Object],
      Target: [Object],
      TrustedTypes: [Object],
      UmdNamedDefine: [Object],
      UniqueName: [Object],
      WarningFilterItemTypes: [Object],
      WarningFilterTypes: [Object],
      WasmLoading: [Object],
      WasmLoadingType: [Object],
      Watch: [Object],
      WatchOptions: [Object],
      WebassemblyModuleFilename: [Object],
      WebpackOptionsNormalized: [Object],
      WebpackPluginFunction: [Object],
      WebpackPluginInstance: [Object]
    },
    title: 'WebpackOptions',
    description: 'Options object as provided by the user.',
    type: 'object',
    additionalProperties: false,
    properties: {
      amd: [Object],
      bail: [Object],
      cache: [Object],
      context: [Object],
      dependencies: [Object],
      devServer: [Object],
      devtool: [Object],
      entry: [Object],
      experiments: [Object],
      externals: [Object],
      externalsPresets: [Object],
      externalsType: [Object],
      ignoreWarnings: [Object],
      infrastructureLogging: [Object],
      loader: [Object],
      mode: [Object],
      module: [Object],
      name: [Object],
      node: [Object],
      optimization: [Object],
      output: [Object],
      parallelism: [Object],
      performance: [Object],
      plugins: [Object],
      profile: [Object],
      recordsInputPath: [Object],
      recordsOutputPath: [Object],
      recordsPath: [Object],
      resolve: [Object],
      resolveLoader: [Object],
      snapshot: [Object],
      stats: [Object],
      target: [Object],
      watch: [Object],
      watchOptions: [Object]
    }
  },
  headerName: 'Webpack',
  baseDataPath: 'configuration',
  postFormatter: [Function: postFormatter]
}

1. How would you tag this issue?

• Bug

2. Describe your issue:

import { createElement, useEffect, useState } from 'rax';

export default () => {
    const [visible, setVisible] = useState(false);

    useEffect(async () => {
        let a = await new Promise((resolve) => {
            setTimeout(() => {
                resolve(11);
            });
        });
        console.log(a);
    });

    let element = (
        <div>
            <button onClick={() => setVisible(true)}>update</button>
        </div>
    );

    return element;
}

If I click the update button, Rax will throw the error below:

分享给朋友是可以的。但是分享朋友圈不生效。不知道什么原因。

  // query: 自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分
  const handleShareTimeline = () => {
    return {
      title: '我是自定义title',   // 不生效, 分享后是页面的title而不是自定义title
      query: `key=123`,
      imageUrl: 'https://xxxx.png',  // 不生效, 看到的是logo
    }
  };

  if (isWeChatMiniProgram) {
    registerNativeEventListeners(Index, ['onShareTimeline']);
  }

  useEffect(() => {
    if (isWeChatMiniProgram) {
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareTimeline'],
      });
      addNativeEventListener('onShareTimeline', handleShareTimeline);
    }
    return () => {
      if (isWeChatMiniProgram) {
        removeNativeEventListener('onShareTimeline', handleShareTimeline);
      }
    };
  }, []);

代码：

<view style={{
      '-webkit-box-orient': 'vertical',
      '-webkit-line-clamp': 2,
      color: 'blue',
    }}>

渲染成小程序代码以后，可以发现 -webkit-line-clamp 丢失

"publicPath": "/webapp/"

1. Link组件需要web开发加上publicPath, 小程序不能加；
2. Navigator组件需要web开发加上publicPath(使用history不需要开发拼), 小程序不能加；
3. tabbar的image在public文件夹下会识别不到image，如果加上 publicPath就会影响小程序。
4. 请问代码中如何获取publicPath

webpack: building modules...(node:48859) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead (node:48859) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead webpack: building modules.../Users/edward/study/testrax/demo/node_modules/neo-async/async.js:14 throw new Error('Callback was already called.'); ^

Error: Callback was already called. at throwError (/Users/edward/study/testrax/demo/node_modules/neo-async/async.js:14:11) at /Users/edward/study/testrax/demo/node_modules/neo-async/async.js:2760:7 at Compilation.processModuleDependencies (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:435:4) at afterBuild (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:560:16) at _this.buildModule.err (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:606:11) at callback (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:357:35) at module.build.error (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:393:12) at handleParseError (/Users/edward/study/testrax/demo/node_modules/webpack/lib/NormalModule.js:364:12) at doBuild.err (/Users/edward/study/testrax/demo/node_modules/webpack/lib/NormalModule.js:394:5) at runLoaders (/Users/edward/study/testrax/demo/node_modules/webpack/lib/NormalModule.js:270:12) at /Users/edward/study/testrax/demo/node_modules/loader-runner/lib/LoaderRunner.js:370:3 at iterateNormalLoaders (/Users/edward/study/testrax/demo/node_modules/loader-runner/lib/LoaderRunner.js:211:10) at Array. (/Users/edward/study/testrax/demo/node_modules/loader-runner/lib/LoaderRunner.js:202:4) at Storage.finished (/Users/edward/study/testrax/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16) at provider (/Users/edward/study/testrax/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9) at /Users/edward/study/testrax/demo/node_modules/graceful-fs/graceful-fs.js:78:16 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: rax-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

使用rax比使用we要舒服，但都有同一个问题，似乎不能引用本地资源。 我想使用字体图标 <Icon fontFamily="iconfont" source={{uri: 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf', codePoint: '\uE60f'}}/> 这样，如果客户端无网络，图标就无法显示出来，现在是否有解决办法？ 我尝试local://drawable/aaa这样算是可以使用本地图片了，但ttf不行。 还有在windows下 npm run build 不能编译，只能在linux下编译目前

背景

• 我需要一个全屏的rax-slider
• 我设置高度'100vh' => 无效
• 我设置高度'100%' => 无效
• 我设置高度'window.screen.height' => 不符合
• 我设置高度'window.screen.height * window.pixelRadio' => 只有iphone6符合
• 我设置高度'window.screen.height * 2 => 真机不符合

需求

• 可以设置100%
• 可以设置100vh
• 或者其他办法解决需求

const appConfig = { app: { getInitialData: async () => { const restUserRes = await queryCurrentUser(); return { initialStates: {user: { currentUser: restUserRes } }}; }, }, }

支持主题：https://github.com/xcodebuild/rax/tree/feature/theme-support/packages/stylesheet-loader#theme-support

背景

部分场景需要满足运行时更换主题（例如支持 darkmode）和覆盖组件部分样式的功能

主题

基于现有方案的基础上，允许在 CSS 中使用 var()

.text {
  color: var(--color-error-1);
}

在 JSX 中使用：

<View>
  <Text className="text">other</Text>
</View>

或者

import styles from './index.css';

<View>
  <Text style={styles.text}>other</Text>
</View>

在 JS 中动态设置主题：

import themeHelper from 'rax-theme-helper';

const origin = themeHelper.get();

themeHelper.set({
  ...origin,
  theme: {
    ...origin.theme,
    '--color-error-1': 'red'
  }
})

默认会提供一套基础的主题 key-value，来自于 @rax-ui/core，列表见：https://cdn.jsdelivr.net/npm/@rax-ui/[email protected]/lib/index.d.ts

新增选项

由于主题支持会带来运行时依赖（rax-theme-helper），所以默认不开启，需要开启 babel-plugin-transform-jsx-stylesheet 和 stylesheet-loader 的配置

{ theme: true }

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• [x] Question

2. Describe your issue: I'd be interested in a comparison with Preact

用onChooseavatar写事件好像失效。

需要支持微信小程序 open-type 头像获取：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html 支持chooseAvatar回调

Please describe the problem you meet.

在 Kraken 中切换导航页的行为和 Web 版一致，会试图跳转到某个特定 html 页面，如 /home.html，但是在 Kraken 中并不存在这样的页面，而是一个个的 kbc1 包，因此跳转会失败。

解决方法有两个：

1. 在 Rax 端找机会重写跳转目标。对于显式的跳转按钮实现，我们可以封装一个自有的 navigateTo 函数，判断是 isKraken 就将传入的 path 转换为 https://xxx/kraken/.kbc1 这样的目标（实践证明可行）。但是导航栏的点击跳转不知道怎么重载；
2. 在 Kraken 端劫持 navigation 操作，将收到的类似 /home.html 的跳转请求重写为如上的 kbc1 目标。但是 Kraken/WebF 不支持重载 navigation 操作（包含 handleNavigationAction 方法的 KrakenViewController 是一个内部类无法触达），可传入的 KrakenNavigationDelegate 只能选择是否停止跳转(disallow)，而无法改变跳转目标；

上面两条路看起来都不通。不知道是否还有没有其他解决方法？