Use script tag for engine in examples

examples/scripts/example-data.mjs

@@ -3,6 +3,7 @@ import BabelParser from '@babel/parser';
 import Prettier from 'prettier/standalone';
 import Babel from '@babel/standalone';
 import formatters from '../src/app/helpers/formatters.mjs';
+import readDirectoryNames from '../src/app/helpers/read-dir-names.mjs';
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
 
@@ -17,8 +18,7 @@ if (!fs.existsSync(`${MAIN_DIR}/dist/`)) {
     fs.mkdirSync(`${MAIN_DIR}/dist/`);
 }
 
-fs.readdirSync(`${MAIN_DIR}/src/examples/`).forEach(function (category) {
-    if (category.includes('index.mjs')) return;
+readDirectoryNames(`${MAIN_DIR}/src/examples/`).forEach(function (category) {
     exampleData[category] = {};
     const examples = fs.readdirSync(`${MAIN_DIR}/src/examples/${category}`);
     examples.forEach((exampleName) => {

examples/scripts/example-directory/index.mjs

@@ -2,6 +2,7 @@ import fs from 'fs';
 import Handlebars from 'handlebars';
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
+import readDirectoryNames from '../../src/app/helpers/read-dir-names.mjs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -16,9 +17,7 @@ function loadHtmlTemplate(data) {
 
 const categoriesList = [];
 
-let categories = fs.readdirSync(`${MAIN_DIR}/src/examples/`);
-categories = categories.filter(c => c !== 'index.mjs');
-categories.forEach((category) => {
+readDirectoryNames(`${MAIN_DIR}/src/examples/`).forEach((category) => {
     const dir = `${MAIN_DIR}/dist/${category}`;
     if (!fs.existsSync(dir)) {
         fs.mkdirSync(dir);

examples/scripts/iframe/index.mjs

@@ -3,6 +3,7 @@ import fse from 'fs-extra';
 import Babel from '@babel/standalone';
 import Handlebars from 'handlebars';
 import formatters from '../../src/app/helpers/formatters.mjs';
+import readDirectoryNames from '../../src/app/helpers/read-dir-names.mjs';
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
 
@@ -63,9 +64,7 @@ if (!fs.existsSync(`${MAIN_DIR}/dist/iframe/`)) {
 if (process.env.EXAMPLE && process.env.CATEGORY) {
     buildExample(process.env.CATEGORY, `${process.env.EXAMPLE}.tsx`);
 } else {
-    const categories = fs.readdirSync(`${MAIN_DIR}/src/examples/`);
-    categories.forEach((category) => {
-        if (category.includes('index.mjs')) return;
+    readDirectoryNames(`${MAIN_DIR}/src/examples/`).forEach((category) => {
         const exampleFilenames = fs.readdirSync(`${MAIN_DIR}/src/examples/${category}`);
         exampleFilenames.forEach((exampleFilename) => {
             if (exampleFilename.includes('index.mjs')) return;

examples/scripts/iframe/index.mustache

@@ -66,16 +66,13 @@
         function loadEngine(callback) {
             const enginePath = urlParams && urlParams.get('use_local_engine') || "{{{enginePath}}}";
 
-            fetch(enginePath)
-                .then(function(response) { return response.text() })
-                .then(function(data) {
-                    var module = {
-                        exports: {}
-                    };
-                    window.pc = (Function('module', 'exports', data).call(module, module, module.exports), module).exports;
-                    window.top.pc = window.pc;
-                    callback();
-                });
+            const script = document.createElement('script');
+            script.setAttribute('src', enginePath);
+            script.onload = function() {
+                window.top.pc = window.pc;
+                callback();
+            };
+            document.head.appendChild(script);
         }
 
         function setupApplication(app) {

examples/src/app/helpers/read-dir-names.mjs

@@ -0,0 +1,9 @@
+import fs from 'fs';
+
+const readDirectoryNames = (dir) => {
+    return fs.readdirSync(dir, { withFileTypes: true })
+        .filter(result => result.isDirectory())
+        .map(result => result.name);
+};
+
+export default readDirectoryNames;