feat: add Intl.Segmenter polyfill (#3688)

apps/core/.webpack/config.ts

@@ -84,6 +84,7 @@ export const createConfiguration: (
     experiments: {
       topLevelAwait: true,
       outputModule: false,
+      syncWebAssembly: true,
     },
     output: {
       environment: {

apps/core/.webpack/webpack.config.ts

@@ -15,21 +15,24 @@ export default async function (cli_env: any, _: any) {
   const config = createConfiguration(flags, runtimeConfig);
   return merge(config, {
     entry: {
+      'polyfill/intl-segmenter': {
+        import: resolve(rootPath, 'src/polyfill/intl-segmenter.ts'),
+      },
       'polyfill/ses': {
         import: resolve(rootPath, 'src/polyfill/ses.ts'),
       },
       plugin: {
-        dependOn: ['polyfill/ses'],
+        dependOn: ['polyfill/intl-segmenter', 'polyfill/ses'],
         import: resolve(rootPath, 'src/bootstrap/register-plugins.ts'),
       },
       app: {
         chunkLoading: 'import',
-        dependOn: ['polyfill/ses', 'plugin'],
+        dependOn: ['polyfill/intl-segmenter', 'polyfill/ses', 'plugin'],
         import: resolve(rootPath, 'src/index.tsx'),
       },
       '_plugin/index.test': {
         chunkLoading: 'import',
-        dependOn: ['polyfill/ses', 'plugin'],
+        dependOn: ['polyfill/intl-segmenter', 'polyfill/ses', 'plugin'],
         import: resolve(rootPath, 'src/_plugin/index.test.tsx'),
       },
     },
@@ -39,7 +42,7 @@ export default async function (cli_env: any, _: any) {
         inject: 'body',
         scriptLoading: 'module',
         minify: false,
-        chunks: ['app', 'plugin', 'polyfill/ses'],
+        chunks: ['app', 'plugin', 'polyfill/intl-segmenter', 'polyfill/ses'],
         filename: 'index.html',
       }),
       new HTMLPlugin({
@@ -47,7 +50,12 @@ export default async function (cli_env: any, _: any) {
         inject: 'body',
         scriptLoading: 'module',
         minify: false,
-        chunks: ['_plugin/index.test', 'plugin', 'polyfill/ses'],
+        chunks: [
+          '_plugin/index.test',
+          'plugin',
+          'polyfill/intl-segmenter',
+          'polyfill/ses',
+        ],
         filename: '_plugin/index.html',
       }),
     ],

apps/core/package.json

@@ -39,6 +39,7 @@
     "css-spring": "^4.1.0",
     "cssnano": "^6.0.1",
     "graphql": "^16.7.1",
+    "intl-segmenter-polyfill-rs": "^0.1.5",
     "jotai": "^2.2.2",
     "jotai-devtools": "^0.6.1",
     "lit": "^2.7.6",

apps/core/src/polyfill/intl-segmenter.ts

@@ -0,0 +1,11 @@
+if (Intl.Segmenter === undefined) {
+  await import('intl-segmenter-polyfill-rs').then(({ Segmenter }) => {
+    Object.defineProperty(Intl, 'Segmenter', {
+      value: Segmenter,
+      configurable: true,
+      writable: true,
+    });
+  });
+}
+
+export {};