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 {};

yarn.lock

@@ -257,6 +257,7 @@ __metadata:
     express: ^4.18.2
     graphql: ^16.7.1
     html-webpack-plugin: ^5.5.3
+    intl-segmenter-polyfill-rs: ^0.1.5
     jotai: ^2.2.2
     jotai-devtools: ^0.6.1
     lit: ^2.7.6
@@ -21135,6 +21136,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intl-segmenter-polyfill-rs@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "intl-segmenter-polyfill-rs@npm:0.1.5"
+  checksum: 9cb27151a366d96eb26aa00d41fb2cb116500927eeaefb099161e328cf2fe18c68e9ed84310ad85c688f5600325ee7e925203f58f81773377997f596eec5dc5b
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"