renusify 2.5.2 → 3.0.0

package/components/codeEditor/highlightJs.vue

@@ -12,44 +12,43 @@
   </div>
 </template>
 
-<script>
-import mixin from './mixin.js'
-import mixin_h from '../highlight/mixin.js'
-
-export default {
-  name: "highlight-script",
-  props: {
-    modelValue: String,
-  },
-  mixins: [mixin, mixin_h],
-  data() {
-    return {
-      d: this.modelValue,
-      code: "",
-    };
-  },
-  async created() {
-    if (this.modelValue) {
-      await this.build_code()
-    }
-  },
-  watch: {
-    modelValue: function () {
-      this.d = this.modelValue;
-    },
-    d: async function () {
-      await this.build_code()
-      this.$emit("update:modelValue", this.d);
-    },
-  },
-  methods: {
-    async build_code() {
-      this.code = await this.highlight(this.d, "js", true)
-    }
+<script setup>
+import {ref, watch, onMounted} from 'vue'
+import {useHighlight} from '../highlight/useHighlight.js'
+import {useCodeFormatter} from './useCodeFormatter.js'
+
+const props = defineProps({
+  modelValue: String
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const {highlight} = useHighlight()
+const {setTab} = useCodeFormatter()
+
+const d = ref(props.modelValue || '')
+const code = ref('')
+
+const build_code = async () => {
+  if (d.value) {
+    code.value = await highlight(d.value, "js", true)
+  } else {
+    code.value = ''
   }
-};
-</script>
+}
+
+watch(() => props.modelValue, (newValue) => {
+  d.value = newValue
+})
 
-<style lang="scss">
+watch(d, async (newValue) => {
+  await build_code()
+  emit('update:modelValue', newValue)
+}, {immediate: true})
 
-</style>
+onMounted(async () => {
+  if (props.modelValue) {
+    await build_code()
+  }
+})
+</script>

package/components/codeEditor/index.vue

@@ -32,6 +32,7 @@
           :css="sty"
           :script="scr"
           :template="temp"
+          :scriptSetup="scriptSetup"
       ></r-code-editor-run>
     </div>
     <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
@@ -42,10 +43,11 @@
       </div>
       <div>
         <span v-show="scriptShow" class="highlight-syn-class"
-        >&lt;script&gt;<br/>export default {</span
+        >&lt;script <span class="highlight-syn-str" v-if="scriptSetup">setup</span>&gt;<br/>
+          <template v-if="!scriptSetup">export default {</template></span
         >
         <highlight-script ref="h-js" v-model="scr"></highlight-script>
-        <span v-show="scriptShow" class="highlight-syn-class">}<br/>&lt;/script&gt;</span>
+        <span v-show="scriptShow" class="highlight-syn-class"><template v-if="!scriptSetup">}</template><br/>&lt;/script&gt;</span>
       </div>
       <div>
         <span v-show="cssShow" class="highlight-syn-class"
@@ -58,87 +60,135 @@
   </div>
 </template>
 
-<script>
-import {defineAsyncComponent} from 'vue'
-
-export default {
-  name: "r-code-editor",
-  components: {
-    HighlightCss: defineAsyncComponent(() =>
-        import("./highlightCss.vue")
-    ), HighlightScript: defineAsyncComponent(() =>
-        import("./highlightJs.vue")
-    ), highlightHtml: defineAsyncComponent(() =>
-        import("./highlightHtml.vue")
-    ), RCodeEditorRun: defineAsyncComponent(() =>
-        import("./run.vue")
-    )
-  },
-  props: {
-    runnable: Boolean,
-    templateShow: {type: Boolean, default: true},
-    scriptShow: {type: Boolean, default: true},
-    cssShow: {type: Boolean, default: true},
-    template: String,
-    script: String,
-    css: String,
-  },
-  emits: ["update:template", "update:script", "update:css"],
-  data() {
-    return {
-      show: "code",
-      code: "",
-      edited: false,
-      temp: this.template,
-      scr: this.script,
-      sty: this.css,
-      id: this.$helper.uniqueId(),
-    };
-  },
-  created() {
-    if (!this.$r.icons.play) {
-      this.$r.icons.play =
-          '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.14v14l11-7l-11-7Z"/></svg>';
-    }
-    if (!this.$r.icons.code_tags) {
-      this.$r.icons.code_tags =
-          '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4Z"/></svg>';
-    }
-  },
-  watch: {
-    template: function (n) {
-      this.temp = n
-    },
-    script: function (n) {
-      this.scr = n
-    },
-    css: function (n) {
-      this.sty = n
-    },
-    temp: function () {
-      this.$emit("update:template", this.temp);
-    },
-    scr: function () {
-      this.$emit("update:script", this.scr);
-    },
-    sty: function () {
-      this.$emit("update:css", this.sty);
-    },
-  },
-  methods: {
-    pretty() {
-      this.temp = this.$refs["h-html"].pretty_html(this.temp)
-      this.scr = this.$refs["h-js"].pretty_js(this.scr)
-      this.sty = this.$refs["h-css"].pretty_js(this.sty)
-    }
-  },
-};
+<script setup>
+import {ref, watch, defineAsyncComponent, inject} from 'vue'
+import {useCodeFormatter} from "./useCodeFormatter"
+
+const {pretty_html, pretty_js} = useCodeFormatter()
+const HighlightCss = defineAsyncComponent(() => import("./highlightCss.vue"))
+const HighlightScript = defineAsyncComponent(() => import("./highlightJs.vue"))
+const HighlightHtml = defineAsyncComponent(() => import("./highlightHtml.vue"))
+const RCodeEditorRun = defineAsyncComponent(() => import("./run.vue"))
+
+const props = defineProps({
+  /**
+   * Enables run functionality for the code editor
+   * @type {Boolean}
+   */
+  runnable: Boolean,
+
+  /**
+   * Shows/hides the template section
+   * @type {Boolean}
+   * @default true
+   */
+  templateShow: {type: Boolean, default: true},
+
+  /**
+   * Shows/hides the script section
+   * @type {Boolean}
+   * @default true
+   */
+  scriptShow: {type: Boolean, default: true},
+
+  /**
+   * Shows/hides the CSS section
+   * @type {Boolean}
+   * @default true
+   */
+  cssShow: {type: Boolean, default: true},
+
+  /**
+   * Template code content
+   * @type {String}
+   */
+  template: String,
+
+  /**
+   * Script code content
+   * @type {String}
+   */
+  script: String,
+
+  /**
+   * CSS code content
+   * @type {String}
+   */
+  css: String,
+  /**
+   * Script code content is setup.
+   */
+  scriptSetup: Boolean
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when template content changes
+   * @param {String} template - Updated template code
+   */
+  "update:template",
+
+  /**
+   * Emitted when script content changes
+   * @param {String} script - Updated script code
+   */
+  "update:script",
+
+  /**
+   * Emitted when CSS content changes
+   * @param {String} css - Updated CSS code
+   */
+  "update:css"
+])
+
+const renusify = inject('renusify')
+const $r = renusify.$r
+const $helper = renusify.$helper
+
+const show = ref("code")
+const temp = ref(props.template || "")
+const scr = ref(props.script || "")
+const sty = ref(props.css || "")
+const id = ref($helper?.uniqueId() || Math.random().toString(36).substr(2, 9))
+
+watch(() => props.template, (newValue) => {
+  temp.value = newValue
+})
+
+watch(() => props.script, (newValue) => {
+  scr.value = newValue
+})
+
+watch(() => props.css, (newValue) => {
+  sty.value = newValue
+})
+
+watch(temp, (newValue) => {
+  emit("update:template", newValue)
+})
+
+watch(scr, (newValue) => {
+  emit("update:script", newValue)
+})
+
+watch(sty, (newValue) => {
+  emit("update:css", newValue)
+})
+
+/**
+ * Formats all code sections (template, script, CSS) to make them prettier
+ */
+const pretty = () => {
+  temp.value = pretty_html(temp.value)
+  scr.value = pretty_js(scr.value)
+  sty.value = pretty_js(sty.value)
+}
 </script>
 
 <style lang="scss">
-@use "../../style/variables/base";
+@use "../../style" as *;
 
-.#{base.$prefix}code-editor {
+.#{$prefix}code-editor {
   position: relative;
   white-space: break-spaces;
   caret-color: #f8f8f2;

package/components/codeEditor/run.vue

@@ -1,46 +1,232 @@
 <template>
   <component :is="page"></component>
 </template>
-<script>
-import {defineAsyncComponent} from "vue/dist/vue.esm-bundler.js";
-
-export default {
-  name: "r-code-editor-run",
-  props: {
-    template: String,
-    script: String,
-    css: String,
-    id: String,
-  },
-  computed: {
-    page() {
-      if (this.css) {
-        let children = document.querySelectorAll(`[f='${this.id}']`);
-        if (children) {
-          let childArray = Array.prototype.slice.call(children);
-
-          childArray.forEach(function (child) {
-            child.parentNode.removeChild(child);
-          });
+<script setup>
+import {
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+  provide,
+  reactive,
+  ref,
+  toRef,
+  toRefs,
+  watch,
+  watchEffect
+} from 'vue'
+
+import {defineAsyncComponent, defineComponent} from 'vue/dist/vue.esm-bundler.js'
+
+const props = defineProps({
+  template: String,
+  script: String,
+  css: String,
+  id: String,
+  scriptSetup: Boolean,
+})
+const addStyleToHead = () => {
+  if (props.css && props.id) {
+    const existingStyles = document.querySelectorAll(`[f='${props.id}']`)
+    existingStyles.forEach(style => style.remove())
+
+    const style = document.createElement("style")
+    style.textContent = props.css
+    style.setAttribute("f", props.id)
+    style.setAttribute("type", "text/css")
+    document.head.appendChild(style)
+  }
+}
+
+const removeStyleFromHead = () => {
+  if (props.id) {
+    const existingStyles = document.querySelectorAll(`[f='${props.id}']`)
+    existingStyles.forEach(style => style.remove())
+  }
+}
+
+const page = computed(() => {
+  addStyleToHead()
+
+  const temp = props.template || ""
+  const scr = props.script || ''
+
+  return defineAsyncComponent(() =>
+      new Promise((resolve) => {
+        try {
+          if (props.scriptSetup) {
+            // Create the component with script setup
+            const componentObj = defineComponent({
+              template: temp,
+              setup() {
+                // Create a context object with all Vue APIs
+                const vueContext = {
+                  // Reactivity
+                  ref,
+                  reactive,
+                  computed,
+                  watch,
+                  watchEffect,
+
+                  // Lifecycle
+                  onMounted,
+                  onUnmounted,
+                  onUpdated,
+
+                  // Dependency Injection
+                  inject,
+                  provide,
+
+                  // Refs
+                  toRefs,
+                  toRef
+                }
+
+                try {
+                  // Process the script to remove imports and handle setup
+                  const processedScript = processScriptForSetup(scr)
+
+                  // Create the setup function with all Vue APIs available
+                  const setupCode = `
+                  // Make Vue APIs available
+                  ${Object.entries(vueContext).map(([key, value]) =>
+                      `const ${key} = arguments[0]['${key}'];`
+                  ).join('\n')}
+
+                  // User's script
+                  ${processedScript}
+
+                  // Collect and return declared variables
+                  const result = {};
+                  const declaredVars = ${JSON.stringify(extractDeclaredVariables(processedScript))};
+                  declaredVars.forEach(varName => {
+                    try {
+                      if (typeof eval(varName) !== 'undefined') {
+                        result[varName] = eval(varName);
+                      }
+                    } catch(e) {}
+                  });
+                  return result;
+                `
+
+                  const setupFunction = new Function(setupCode)
+                  return setupFunction(vueContext)
+
+                } catch (error) {
+                  console.error('Error executing user script:', error)
+                  return {
+                    __error: ref(`Script execution error: ${error.message}`)
+                  }
+                }
+              }
+            })
+
+            resolve(componentObj)
+
+          } else {
+            // For Options API
+            const scriptObj = eval(`(function() {
+            return { ${scr} }
+          })()`)
+
+            const componentObj = defineComponent({
+              template: temp,
+              ...scriptObj
+            })
+
+            resolve(componentObj)
+          }
+        } catch (error) {
+          console.error('Error creating component:', error)
+          resolve(createErrorComponent(error))
         }
-        let s = document.createElement("style");
-        s.innerText = this.css;
-        s.setAttribute("f", this.id);
-        s.setAttribute("type", "text/css");
-        window.document.head.append(s);
+      })
+  )
+})
+
+// Process script to remove imports and prepare for setup
+function processScriptForSetup(script) {
+  let processed = script
+
+  // Remove Vue imports since we provide them
+  processed = processed.replace(/import\s*{[^}]*}\s*from\s*['"]vue['"][\s;]*/g, '')
+
+  // Remove other imports (for now, could handle them differently)
+  processed = processed.replace(/import\s+.*?\s+from\s+['"][^'"]+['"][\s;]*/g, '// [import removed]')
+
+  // Handle defineProps and defineEmits
+  processed = processed.replace(/defineProps\s*\(/g, 'const props = defineProps(')
+  processed = processed.replace(/defineEmits\s*\(/g, 'const emit = defineEmits(')
+
+  return processed.trim()
+}
+
+// Extract variable names that should be returned
+function extractDeclaredVariables(script) {
+  const variables = []
+
+  // Match variable declarations
+  const varPatterns = [
+    /(?:const|let|var)\s+(\w+)\s*=/g,
+    /function\s+(\w+)\s*\(/g,
+    /(\w+)\s*:\s*\(\)\s*=>/g // Arrow functions
+  ]
+
+  varPatterns.forEach(pattern => {
+    let match
+    while ((match = pattern.exec(script)) !== null) {
+      if (match[1] && !match[1].startsWith('_')) {
+        variables.push(match[1])
       }
-      let temp = this.template || "";
-      let scr = this.script || 'name:"test"';
-      return defineAsyncComponent(
-          () =>
-              new Promise((resolve) => {
-                resolve({
-                  template: temp,
-                  ...eval("Object({" + scr + "})"),
-                });
-              })
-      );
+    }
+  })
+
+  // Also look for ref, reactive, computed declarations
+  const reactivePatterns = [
+    /(\w+)\s*=\s*ref\(/,
+    /(\w+)\s*=\s*reactive\(/,
+    /(\w+)\s*=\s*computed\(/
+  ]
+
+  script.split('\n').forEach(line => {
+    reactivePatterns.forEach(pattern => {
+      const match = line.match(pattern)
+      if (match && match[1]) {
+        variables.push(match[1])
+      }
+    })
+  })
+
+  return [...new Set(variables)] // Remove duplicates
+}
+
+function createErrorComponent(error) {
+  return defineComponent({
+    name: 'ErrorComponent',
+    setup() {
+      const errorMsg = ref(error.message)
+      return {errorMsg}
     },
-  },
-};
+    template: `
+      <div style="color: #f44336; padding: 20px; background: #ffebee; border-radius: 4px; font-family: 'Courier New', monospace;">
+        <div style="font-weight: bold; margin-bottom: 8px;">Script Error:</div>
+        <div>{{ errorMsg }}</div>
+      </div>
+    `
+  })
+}
+
+onMounted(() => {
+  addStyleToHead()
+})
+
+onUnmounted(() => {
+  removeStyleFromHead()
+})
+
+watch(() => props.css, () => {
+  addStyleToHead()
+})
 </script>
+