feat: enable web binary template by default in WebEncodePlugin

.changeset/enable-web-binary-template-by-default.md

@@ -0,0 +1,20 @@
+---
+"@lynx-js/template-webpack-plugin": patch
+---
+
+feat(web): enable web binary template by default
+
+The default encoding format for the web platform template has been changed from JSON to Binary.
+
+**Benefits for developers:**
+
+- **Smaller output size:** Binary templates are more compact than JSON strings, reducing the final bundle size.
+- **Faster load performance:** Binary templates parse faster than JSON in the runtime, improving the time-to-interactive for web applications.
+
+**How to turn off this feature:**
+If you encounter any issues with the new binary template format, you can revert to the previous JSON format by setting the environment variable `EXPERIMENTAL_USE_WEB_BINARY_TEMPLATE` to `'false'` or `'0'` before running your build commands. For example:
+`EXPERIMENTAL_USE_WEB_BINARY_TEMPLATE=false rspeedy build`
+
+**Upgrade to `@lynx-js/web-core@0.20.2` could support the new output format**
+
+See [`@lynx-js/web-core` Changelog](https://lynx-stack.dev/changelog/lynx-js--web-core)

packages/web-platform/web-core-e2e/scripts/generate-build-command.js

@@ -27,7 +27,6 @@ if (command.length) {
           shell: true,
           env: {
             ...process.env,
-            'EXPERIMENTAL_USE_WEB_BINARY_TEMPLATE': 'true',
           },
         });
 

packages/web-platform/web-tests/package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "build": "pnpm dlx premove dist && pnpm run --stream \"/^build:.*/\"",
     "build:csr": "node ./scripts/generate-build-command.js",
-    "build:ssr": "pnpm dlx cross-env ENABLE_SSR=1 EXPERIMENTAL_USE_WEB_BINARY_TEMPLATE=true node ./scripts/generate-build-command.js",
+    "build:ssr": "pnpm dlx cross-env ENABLE_SSR=1 node ./scripts/generate-build-command.js",
     "coverage": "nyc report --cwd=$(realpath ../)",
     "coverage:ci": "nyc report --cwd=$(realpath ../) --reporter=lcov",
     "lh": "pnpm dlx @lhci/cli autorun",

packages/webpack/template-webpack-plugin/src/WebEncodePlugin.ts

@@ -107,13 +107,10 @@ export class WebEncodePlugin {
           }
           const isExperimentalWebBinary = process
             .env['EXPERIMENTAL_USE_WEB_BINARY_TEMPLATE'];
-          if (isExperimentalWebBinary === 'true') {
-            const { encode } = await import('@lynx-js/web-core/encode');
-            return {
-              buffer: Buffer.from(encode(tasmJSONInfo as TasmJSONInfo)),
-              debugInfo: '',
-            };
-          } else if (isExperimentalWebBinary == null /*undefined or null */) {
+          if (
+            isExperimentalWebBinary === 'false'
+            || isExperimentalWebBinary === '0'
+          ) {
             return {
               buffer: Buffer.from(
                 JSON.stringify({
@@ -130,10 +127,11 @@ export class WebEncodePlugin {
               debugInfo: '',
             };
           } else {
-            // only allow 'true' or undefined/null
-            throw new Error(
-              `Unknown value of EXPERIMENTAL_USE_WEB_BINARY_TEMPLATE: ${isExperimentalWebBinary}. Expecting "true" or undefined.`,
-            );
+            const { encode } = await import('@lynx-js/web-core/encode');
+            return {
+              buffer: Buffer.from(encode(tasmJSONInfo as TasmJSONInfo)),
+              debugInfo: '',
+            };
           }
         });
       },

packages/webpack/template-webpack-plugin/test/cases/web/default-export/b.js

@@ -7,20 +7,32 @@ it('should have test in custom-section', async () => {
   const fileContent =
     (await fs.readFile(path.join(__dirname, '..', 'a', 'template.js')))
       .toString();
-  expect(fileContent).toContain('test-content-assert-me');
+  // convert to utf-16
+  const fileContentUtf16 = Buffer.from(fileContent, 'utf-8').toString(
+    'utf-16le',
+  );
+  expect(fileContentUtf16).toContain('test-content-assert-me');
 });
 
 it('should card type', async () => {
   const fileContent =
     (await fs.readFile(path.join(__dirname, '..', 'a', 'template.js')))
       .toString();
-  expect(fileContent).toContain('react');
+
+  // convert to utf-16
+  const fileContentUtf16 = Buffer.from(fileContent, 'utf-8').toString(
+    'utf-16le',
+  );
+  expect(fileContentUtf16).toContain('react');
 });
 
 it('should have app type', async () => {
   const fileContent =
     (await fs.readFile(path.join(__dirname, '..', 'a', 'template.js')))
       .toString();
-  const { appType } = JSON.parse(fileContent);
-  expect(appType).toBeTruthy();
+  // convert to utf-16
+  const fileContentUtf16 = Buffer.from(fileContent, 'utf-8').toString(
+    'utf-16le',
+  );
+  expect(fileContentUtf16).toContain('react');
 });