From 00ea71909a5e9fae02342e35398c78dffd6a0a9b Mon Sep 17 00:00:00 2001
From: wkj <278599135@.com>
Date: Sun, 17 Dec 2023 01:52:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81svg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/native/metro.config.js |  4 ++--
 config/native/transformer.js  | 17 ++++++++++++-----
 package.json                  |  2 ++
 src/build.ts                  | 27 +++++++++++++--------------
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/config/native/metro.config.js b/config/native/metro.config.js
index 3f67473..9473bf0 100644
--- a/config/native/metro.config.js
+++ b/config/native/metro.config.js
@@ -6,8 +6,8 @@ const watchFolders = process.env.NODE_ENV === 'production' ? ['../src', '../node
 ];
 
 const sourceExts = (process.env.NODE_ENV === 'production' || process.env.PROD === 'true') ?
-    ['prod.ts', 'ts', 'tsx', 'prod.js', 'js', 'jsx', 'less', 'json'] :
-    ['dev.ts', 'ts', 'tsx', 'dev.js', 'js', 'jsx', 'less', 'json'];
+    ['prod.ts', 'ts', 'tsx', 'prod.js', 'js', 'jsx', 'less', 'json', 'svg'] :
+    ['dev.ts', 'ts', 'tsx', 'dev.js', 'js', 'jsx', 'less', 'json', 'svg'];
 
 const NullModules = ['fs', 'url'];
 /**
diff --git a/config/native/transformer.js b/config/native/transformer.js
index 7d4b647..f92f143 100644
--- a/config/native/transformer.js
+++ b/config/native/transformer.js
@@ -15,6 +15,9 @@ const traverse = require('@babel/traverse').default;
 const t = require('@babel/types');
 const path = require('path');
 const less = require('less');
+const svgTransformer = require('react-native-svg-transformer');
+const lessTransformer = require('react-native-less-transformer');
+
 const css2rn = require("css-to-react-native-transform").default;
 const { parseSync, transformFromAstSync, transformSync: babelTransform } = require("@babel/core");
 const nullthrows = require("nullthrows");
@@ -94,12 +97,16 @@ function transform({ filename, options, plugins, src }) {
         };
 
         if (filename.endsWith('less')) {
-            return renderToCSS({ src, filename, options }).then((css) => {
-                const cssObject = renderCSSToReactNative(css);
-                const newSrc = `module.exports = ${JSON.stringify(cssObject)}`;
-                return transInner(newSrc);
-            });
+            // return renderToCSS({ src, filename, options }).then((css) => {
+            //     const cssObject = renderCSSToReactNative(css);
+            //     const newSrc = `module.exports = ${JSON.stringify(cssObject)}`;
+            //     return transInner(newSrc);
+            // });
+            return lessTransformer.transform({ src, filename, options });
         }
+        else if (filename.endsWith('.svg')) {
+            return svgTransformer.transform({ src, filename, options });
+        } 
         
         return transInner(src);
     } finally {
diff --git a/package.json b/package.json
index b0447fb..e0ffa28 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,8 @@
         "react-app-polyfill": "^3.0.0",
         "react-dev-utils": "^12.0.1",
         "react-native": "^0.72.7",
+        "react-native-less-transformer": "^1.4.1",
+        "react-native-svg-transformer": "^1.2.0",
         "react-refresh": "^0.11.0",
         "required-path": "^1.0.1",
         "resolve": "^1.20.0",
diff --git a/src/build.ts b/src/build.ts
index 019b009..3d5b6b7 100644
--- a/src/build.ts
+++ b/src/build.ts
@@ -25,15 +25,15 @@ export default async function build(cmd: any) {
     makeLocale('', true);
     //ts类型检查 waring 还是error,
     //主要web受影响，error级别的话 控制台和网页都报错，warning级别的话 控制台报错
+    // development/staging/production
     const TSC_COMPILE_ON_ERROR = cmd.check !== 'error';
     Success(
         `${success(
             `build ${cmd.target} environment:${cmd.mode} ${
-                cmd.mode !== 'production'
-                    ? `server:${!!cmd.prod}`
-                    : ''
+                ['development'].includes(cmd.mode) ? `server:${!!cmd.prod}` : ''
             } ${
-                cmd.target !== 'web' && cmd.mode !== 'production'
+                ['mp', 'wechatMp'].includes(cmd.target) &&
+                ['development'].includes(cmd.mode)
                     ? `split:${!!cmd.split}`
                     : ''
             }`
@@ -86,7 +86,7 @@ export default async function build(cmd: any) {
                 !!cmd.memoryLimit && `MEMORY_LIMIT=${cmd.memoryLimit}`,
                 `node`,
                 cmd.memoryLimit && `--max_old_space_size=${cmd.memoryLimit}`,
-                require.resolve(
+                resolve(
                     `../scripts/${
                         cmd.mode === 'production'
                             ? 'build-web.js'
@@ -104,11 +104,13 @@ export default async function build(cmd: any) {
         } else {
             Error(`${error(`执行失败`)}`);
         }
-    }
-    else if (['native', 'rn'].includes(cmd.target)) {
+    } else if (['native', 'rn'].includes(cmd.target)) {
         const prjDir = process.cwd();
         const cwd = resolve(prjDir, cmd.subDir || 'native');
-        copyFileSync(resolve(prjDir, 'package.json'), resolve(cwd, 'package.json'));
+        copyFileSync(
+            resolve(prjDir, 'package.json'),
+            resolve(cwd, 'package.json')
+        );
         // rn不支持注入NODE_ENVIRONMENT这样的环境变量，cross-env没有用
         /* const result = spawn.sync(
             'react-native',
@@ -127,7 +129,7 @@ export default async function build(cmd: any) {
                 `NODE_ENV=${cmd.mode}`,
                 'OAK_PLATFORM=native',
                 'react-native',
-                'start'
+                'start',
             ].filter(Boolean),
             {
                 cwd,
@@ -140,12 +142,9 @@ export default async function build(cmd: any) {
         } else {
             Error(`${error(`执行失败`)}`);
         }
-    }
-    else {
+    } else {
         Error(
-            `${error(
-                `target could only be web or mp(wechatMp) or rn(native)`
-            )}`
+            `${error(`target could only be web or mp(wechatMp) or rn(native)`)}`
         );
     }
 }