cleanup

vue3/src/components/display/Instructions.vue

@@ -0,0 +1,42 @@
+<template>
+    <component :is="compiled_instructions" :ingredient_factor="ingredient_factor" :instructions_html="instructions_html"></component>
+</template>
+
+<script>
+
+import {defineComponent, markRaw} from "vue";
+
+import ScalableNumber from "@/components/display/ScalableNumber.vue";
+
+/**
+ * the API template compiler returns safe, pre rendered html (from markdown) with scalable number tags inside (<scalable-number v-bind:number='80.0000000000000000' v-bind:factor='ingredient_factor'></scalable-number>)
+ * to render this markdown and allow the <scalable-number> component to work we use the special <component> element (https://vuejs.org/api/built-in-special-elements#component)
+ */
+export default defineComponent({
+    name: 'Instructions',
+    computed: {},
+    components: {ScalableNumber},
+    props: {
+        instructions_html: {type: String, required: true},
+        ingredient_factor: {type: Number, required: true},
+    },
+    data() {
+        return {
+            // create a inline component that renders the given html
+            compiled_instructions: markRaw(defineComponent({
+                name: 'compiled-instructions-component',
+                props: {
+                    instructions_html: {type: String, required: true},
+                    ingredient_factor: {type: Number, required: true},
+                },
+                components: {ScalableNumber,},
+                template: `<div>${this.instructions_html}</div>`
+            }))
+        }
+    },
+    mounted() {
+
+    },
+})
+</script>
+

vue3/src/components/display/InstructionsCompileComponent.vue

@@ -1,34 +0,0 @@
-<template>
-    <component :is="compiled" :ingredient_factor="ingredient_factor" :code="code"></component>
-</template>
-
-<script>
-
-import {defineComponent} from "vue";
-
-import ScalableNumber from "@/components/display/ScalableNumber.vue";
-
-
-export default defineComponent({
-    name: 'InstructionsCompileComponent',
-    computed: {},
-    components: {ScalableNumber},
-    props: [
-        'code', 'ingredient_factor'
-    ],
-    data() {
-        return {
-            compiled: defineComponent( {
-                name: 'compiled-instructions-component',
-                props: ['ingredient_factor', 'code'],
-                components: {  ScalableNumber, },
-                template: `<div>${this.code}</div>`
-            })
-        }
-    },
-    mounted() {
-
-    },
-})
-</script>
-

vue3/src/components/display/Step.vue

@@ -20,7 +20,7 @@
         <IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
 
         <v-card-text v-if="step.instructionsMarkdown.length > 0">
-           <instructions-compile-component :code="step.instructionsMarkdown" :ingredient_factor="1"></instructions-compile-component>
+           <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="1"></instructions>
         </v-card-text>
     </v-card>
 </template>
@@ -31,7 +31,7 @@ import IngredientsTable from "@/components/display/IngredientsTable.vue";
 import {Step} from "@/openapi";
 import {DateTime, Duration, Interval} from "luxon";
 
-import InstructionsCompileComponent from "@/components/display/InstructionsCompileComponent.vue";
+import Instructions from "@/components/display/Instructions.vue";
 
 export default defineComponent({
     name: "Step",
@@ -61,7 +61,7 @@ export default defineComponent({
             return ''
         }
     },
-    components: {InstructionsCompileComponent, IngredientsTable},
+    components: {Instructions, IngredientsTable},
     props: {
         step: {
             type: {} as PropType<Step>,