@vkontakte/create-vk-mini-app - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

package.json

 {
   "name": "@vkontakte/create-vk-mini-app",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "VK Mini Apps Boilerplate",
@@ -5,0 +5,0 @@ "repository": "https://github.com/VKCOM/create-vk-mini-app",

templates/javascript/vkui-bridge-router/package.json

@@ -32,4 +32,5 @@ {
     "eslint-plugin-react-refresh": "^0.4.5",
+    "node-html-parser": "^6.1.12",
     "vite": "^5.0.8"
   }
 }

templates/javascript/vkui-bridge-router/vite.config.js

 import { defineConfig, transformWithEsbuild } from 'vite';
 import react from '@vitejs/plugin-react';
+import { parse } from 'node-html-parser';
 
@@ -30,18 +31,76 @@ function handleModuleDirectivesPlugin() {
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), threatJsFilesAsJsx(), handleModuleDirectivesPlugin()],
+function odrPlugin() {
+  return {
+    name: 'odr-plugin',
+    transformIndexHtml(html) {
+      const tags = ['audio', 'video', 'img', 'link', 'script'];
+      const dom = parse(html);
 
-  optimizeDeps: {
-    force: true,
-    esbuildOptions: {
-      loader: {
-        '.js': 'jsx',
+      const htmlElementHandlers = {
+        removeCrossorigin: (element) => {
+          element.removeAttribute('crossorigin');
+        },
+
+        changeSrc: (element) => {
+          let value = element.getAttribute('src');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('src', '.' + value);
+          }
+
+          value = element.getAttribute('href');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('href', '.' + value);
+          }
+        },
+
+        removeScriptType: (element) => {
+          element.removeAttribute('type');
+        },
+
+        changeScriptLoadToDefer: (element) => {
+          element.setAttribute('defer', 'defer');
+        },
+      };
+
+      tags.forEach((tag) => {
+        dom.getElementsByTagName(tag).forEach((element) => {
+          htmlElementHandlers.changeSrc(element);
+          htmlElementHandlers.removeCrossorigin(element);
+
+          if (element.tagName === 'script'.toUpperCase()) {
+            htmlElementHandlers.removeScriptType(element);
+            htmlElementHandlers.changeScriptLoadToDefer(element);
+          }
+        });
+      });
+
+      return dom.toString();
+    },
+  };
+}
+
+export default ({ mode }) => {
+  return defineConfig({
+    plugins: [
+      react(),
+      threatJsFilesAsJsx(),
+      handleModuleDirectivesPlugin(),
+      mode === 'production' && odrPlugin(),
+    ],
+
+    optimizeDeps: {
+      force: true,
+      esbuildOptions: {
+        loader: {
+          '.js': 'jsx',
+        },
       },
     },
-  },
 
-  build: {
-    outDir: 'build',
-  },
-});
+    build: {
+      outDir: 'build',
+    },
+  });
+};

templates/javascript/vkui-bridge/package.json

@@ -31,4 +31,5 @@ {
     "eslint-plugin-react-refresh": "^0.4.5",
+    "node-html-parser": "^6.1.12",
     "vite": "^5.0.8"
   }
 }

templates/javascript/vkui-bridge/vite.config.js

 import { defineConfig, transformWithEsbuild } from 'vite';
 import react from '@vitejs/plugin-react';
+import { parse } from 'node-html-parser';
 
@@ -30,18 +31,76 @@ function handleModuleDirectivesPlugin() {
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), threatJsFilesAsJsx(), handleModuleDirectivesPlugin()],
+function odrPlugin() {
+  return {
+    name: 'odr-plugin',
+    transformIndexHtml(html) {
+      const tags = ['audio', 'video', 'img', 'link', 'script'];
+      const dom = parse(html);
 
-  optimizeDeps: {
-    force: true,
-    esbuildOptions: {
-      loader: {
-        '.js': 'jsx',
+      const htmlElementHandlers = {
+        removeCrossorigin: (element) => {
+          element.removeAttribute('crossorigin');
+        },
+
+        changeSrc: (element) => {
+          let value = element.getAttribute('src');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('src', '.' + value);
+          }
+
+          value = element.getAttribute('href');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('href', '.' + value);
+          }
+        },
+
+        removeScriptType: (element) => {
+          element.removeAttribute('type');
+        },
+
+        changeScriptLoadToDefer: (element) => {
+          element.setAttribute('defer', 'defer');
+        },
+      };
+
+      tags.forEach((tag) => {
+        dom.getElementsByTagName(tag).forEach((element) => {
+          htmlElementHandlers.changeSrc(element);
+          htmlElementHandlers.removeCrossorigin(element);
+
+          if (element.tagName === 'script'.toUpperCase()) {
+            htmlElementHandlers.removeScriptType(element);
+            htmlElementHandlers.changeScriptLoadToDefer(element);
+          }
+        });
+      });
+
+      return dom.toString();
+    },
+  };
+}
+
+export default ({ mode }) => {
+  return defineConfig({
+    plugins: [
+      react(),
+      threatJsFilesAsJsx(),
+      handleModuleDirectivesPlugin(),
+      mode === 'production' && odrPlugin(),
+    ],
+
+    optimizeDeps: {
+      force: true,
+      esbuildOptions: {
+        loader: {
+          '.js': 'jsx',
+        },
       },
     },
-  },
 
-  build: {
-    outDir: 'build',
-  },
-});
+    build: {
+      outDir: 'build',
+    },
+  });
+};

templates/typescript/vkui-bridge-router/package.json

@@ -34,2 +34,3 @@ {
     "eslint-plugin-react-refresh": "^0.4.5",
+    "node-html-parser": "^6.1.12",
     "typescript": "^5.2.2",
@@ -36,0 +37,0 @@ "vite": "^5.0.8"

templates/typescript/vkui-bridge-router/vite.config.ts

 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { HTMLElement, parse } from 'node-html-parser';
 
@@ -16,9 +17,69 @@ function handleModuleDirectivesPlugin() {
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), handleModuleDirectivesPlugin()],
+/**
+ * This plugin is required for a single product build for the odr archive and a build for the site.
+ * If you have a complex system and a custom script connection system, we recommend using 2 different configurations
+ * for odr and for the site.
+ *
+ * Details: https://dev.vk.com/ru/mini-apps/development/on-demand-resources
+ */
+function odrPlugin() {
+  return {
+    name: 'odr-plugin',
+    transformIndexHtml(html) {
+      const tags = ['audio', 'video', 'img', 'link', 'script'];
+      const dom = parse(html);
 
-  build: {
-    outDir: 'build',
-  },
-});
+      const htmlElementHandlers: Record<string, (element: HTMLElement) => void> = {
+        removeCrossorigin: (element) => {
+          element.removeAttribute('crossorigin');
+        },
+
+        changeSrc: (element) => {
+          let value = element.getAttribute('src');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('src', '.' + value);
+          }
+
+          value = element.getAttribute('href');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('href', '.' + value);
+          }
+        },
+
+        removeScriptType: (element) => {
+          element.removeAttribute('type');
+        },
+
+        changeScriptLoadToDefer: (element) => {
+          element.setAttribute('defer', 'defer');
+        },
+      };
+
+      tags.forEach((tag) => {
+        dom.getElementsByTagName(tag).forEach((element) => {
+          htmlElementHandlers.changeSrc(element);
+          htmlElementHandlers.removeCrossorigin(element);
+
+          if (element.tagName === 'script'.toUpperCase()) {
+            htmlElementHandlers.removeScriptType(element);
+            htmlElementHandlers.changeScriptLoadToDefer(element);
+          }
+        });
+      });
+
+      return dom.toString();
+    },
+  };
+}
+
+export default ({ mode }) => {
+  return defineConfig({
+    plugins: [react(), handleModuleDirectivesPlugin(), mode === 'production' && odrPlugin()],
+
+    build: {
+      outDir: 'build',
+    },
+  });
+};

templates/typescript/vkui-bridge/package.json

@@ -33,2 +33,3 @@ {
     "eslint-plugin-react-refresh": "^0.4.5",
+    "node-html-parser": "^6.1.12",
     "typescript": "^5.2.2",
@@ -35,0 +36,0 @@ "vite": "^5.0.8"

templates/typescript/vkui-bridge/vite.config.ts

 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { HTMLElement, parse } from 'node-html-parser';
 
@@ -16,9 +17,69 @@ function handleModuleDirectivesPlugin() {
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), handleModuleDirectivesPlugin()],
+/**
+ * This plugin is required for a single product build for the odr archive and a build for the site.
+ * If you have a complex system and a custom script connection system, we recommend using 2 different configurations
+ * for odr and for the site.
+ *
+ * Details: https://dev.vk.com/ru/mini-apps/development/on-demand-resources
+ */
+function odrPlugin() {
+  return {
+    name: 'odr-plugin',
+    transformIndexHtml(html) {
+      const tags = ['audio', 'video', 'img', 'link', 'script'];
+      const dom = parse(html);
 
-  build: {
-    outDir: 'build',
-  },
-});
+      const htmlElementHandlers: Record<string, (element: HTMLElement) => void> = {
+        removeCrossorigin: (element) => {
+          element.removeAttribute('crossorigin');
+        },
+
+        changeSrc: (element) => {
+          let value = element.getAttribute('src');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('src', '.' + value);
+          }
+
+          value = element.getAttribute('href');
+
+          if (String(value).startsWith('/')) {
+            value && element.setAttribute('href', '.' + value);
+          }
+        },
+
+        removeScriptType: (element) => {
+          element.removeAttribute('type');
+        },
+
+        changeScriptLoadToDefer: (element) => {
+          element.setAttribute('defer', 'defer');
+        },
+      };
+
+      tags.forEach((tag) => {
+        dom.getElementsByTagName(tag).forEach((element) => {
+          htmlElementHandlers.changeSrc(element);
+          htmlElementHandlers.removeCrossorigin(element);
+
+          if (element.tagName === 'script'.toUpperCase()) {
+            htmlElementHandlers.removeScriptType(element);
+            htmlElementHandlers.changeScriptLoadToDefer(element);
+          }
+        });
+      });
+
+      return dom.toString();
+    },
+  };
+}
+
+export default ({ mode }) => {
+  return defineConfig({
+    plugins: [react(), handleModuleDirectivesPlugin(), mode === 'production' && odrPlugin()],
+
+    build: {
+      outDir: 'build',
+    },
+  });
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

414982

increased by3.1%

Number of package files

130

increased by1.56%

Lines of code

8885

increased by2.26%

No dependency changes