setup-import-components (#102)

* add test for imported component

* refactor: remove code

* add rendering for normal jsx and tsx

* use tsx when needed

* add directives to the readme

* update compiler

* build with the right stuff and an example

* fix types

* add cypress cloud integration

* fix e2e tests

Author: elevatebart

.github/workflows/pr.yml

@@ -28,5 +28,14 @@ jobs:
       - name: Build Demo
         run: npm run build:demo
 
-      - name: Test e2e
-        run: npm run test:e2e
+      - name: Run E2E Test
+        uses: cypress-io/github-action@v5
+        with:
+          start: npm run preview
+          record: true
+          browser: chrome
+        env:
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.github/workflows/release.yml

@@ -33,7 +33,16 @@ jobs:
         run: npm run build:demo
 
       - name: Run E2E Test
-        run: npm run test:e2e
+        uses: cypress-io/github-action@v5
+        with:
+          start: npm run preview
+          record: true
+          browser: chrome
+        env:
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 
       - name: Deploy to vue-live.surge.sh
         if: ${{ github.ref == 'refs/heads/master' }}

README.md

@@ -178,6 +178,15 @@ export default {
 </script>
 ```
 
+### `directives`
+
+**Type** Object:
+
+- key: registration name
+- value: VueJs directive object
+
+You can use this prop in the same fashion as `components` above.
+
 ### `requires`
 
 **Type** Object:

cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  projectId: 'wbesaj',
   e2e: {
     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
     baseUrl: "http://localhost:4173",

cypress/e2e/LiveRefresh.cy.ts

@@ -10,15 +10,26 @@ describe("Live Refresh", () => {
   });
 
   it("changes the render after code change", () => {
+    const textToReplace = "inline component";
+    const textReplaced = "red component";
+
     cy.get("@preview")
-      .find(".v3dp__datepicker input")
-      .should("not.have.value", "");
+      .get("[data-cy=my-button]")
+      .should("have.text", textToReplace);
 
-    const codeToDelete = ' v-model="today"/>';
     cy.get("@container")
-      .find(".prism-editor-wrapper textarea")
-      .type(`${"{backspace}".repeat(codeToDelete.length)}/>`);
+      .find(".prism-editor-wrapper textarea").as("editor");
+    
+		cy.get("@editor").invoke("val")
+      .then((val) => {
+        cy.get("@editor")
+          .clear()
+          .invoke('val', `${val}`.replace(textToReplace, textReplaced))
+					.trigger('input');
 
-    cy.get("@preview").find(".v3dp__datepicker input").should("have.value", "");
+        cy.get("@preview")
+          .get("[data-cy=my-button]")
+          .should("have.text", textReplaced);
+      });
   });
 });

demo/App.vue

@@ -14,7 +14,7 @@
 
     <div class="livebox">
       <div class="hint">You can edit this <span>-></span></div>
-      <VueLive :editorProps="{ lineNumbers: true }" :code="codeTemplate" :layout="CustomLayout"
+      <VueLive :editorProps="{ lineNumbers: true }" :code="codeSfcSetup" :layout="CustomLayout"
         :components="registeredComponents" @error="(e: any) => log('Error on first example', e)" />
     </div>
 
@@ -27,8 +27,8 @@
         file components as well
       </p>
       <VueLive :code="codeSfc" :layout="CustomLayout" />
-			<h2>SFC with setup</h2>
-      <VueLive :code="codeSfcSetup" :layout="CustomLayout" />
+			<h2>VSG partial mode or pure template</h2>
+      <VueLive :code="codeTemplate" :layout="CustomLayout" />
       <h2>Pure JavaScript code</h2>
       <p>Or if you prefer to, use the <b>new Vue()</b> format</p>
       <VueLive :code="codeJs" :layout="CustomLayout" />
@@ -65,6 +65,9 @@
       <h2>JSX</h2>
       <VueLive :code="realjsx" :layout="CustomLayout" :jsx="true" />
 
+			<h2>TSX</h2>
+      <VueLive :code="blobtsx" :layout="CustomLayout" lang="tsx" :jsx="true" />
+
       <h2>Double Root</h2>
       <VueLive :code="doubleRoot" :layout="CustomLayout" />
 
@@ -92,6 +95,7 @@ import codeSfc from "./assets/Button.vue?raw";
 import codeSfcSetup from "./assets/ButtonSetup.vue?raw";
 import codeJs from "./assets/input.js?raw";
 import realjsx from "./assets/real.jsx?raw";
+import blobtsx from "./assets/blob.tsx?raw";
 import codeTemplate from "./assets/PureTemplate.html?raw";
 import doubleRoot from "./assets/PureTemplateDoubleRoot.html?raw";
 import codeChicago from "./assets/Chicago.jsx?raw";
@@ -116,6 +120,7 @@ export default defineComponent({
       CustomLayout: markRaw(CustomLayout),
       chicagoRequires: { "./chicagoNeighbourhoods": all },
       realjsx,
+			blobtsx,
       separateCode: codeSfc,
       doubleRoot,
       openExamples: false,

demo/assets/ButtonSetup.vue

@@ -1,19 +1,28 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, h } from 'vue'
+
+const MyButton = () => {
+	return h('button', 
+		{
+			style: { color: 'red' },
+			"data-cy": "my-button"
+		},
+		'inline component'
+	)
+}
 
 const msg = ref("Push Me")
 </script>
 
 <template>
   <div class="hello">
     <h1>Colored Text</h1>
-    <button>{{ msg }}</button>
+    <input v-model="msg">
+		<div>
+			{{ msg }}
+		</div>
+		<div>
+			<MyButton/>
+		</div>
   </div>
-</template>
-
-<style>
-.hello {
-  text-align: center;
-  color: #900;
-}
-</style>
+</template>

demo/assets/blob.tsx

@@ -0,0 +1,12 @@
+const args = {
+  type: "button",
+  value: "update me",
+} as const;
+
+type Key = keyof typeof args;
+
+export default {
+  render() {
+    return <input {...args} />;
+  },
+};

package-lock.json

@@ -23,7 +23,8 @@
     "debounce": "^1.2.1",
     "hash-sum": "^2.0.0",
     "prismjs": "^1.29.0",
-    "vue-inbrowser-compiler-sucrase": "^4.60.0",
+    "vue-inbrowser-compiler-sucrase": "^4.62.0",
+    "vue-inbrowser-compiler-utils": "^4.62.1",
     "vue-prism-editor": "^2.0.0-alpha.2"
   },
   "devDependencies": {

package.json

@@ -9,7 +9,7 @@ import debounce from "debounce";
 
 import "vue-prism-editor/dist/prismeditor.min.css";
 
-import makeHighlight from "./utils/highlight";
+import makeHighlight, { CONFIGURED_LANGS, type CONFIGURED_LANGS_TYPE } from "./utils/highlight";
 
 const UPDATE_DELAY = 300;
 
@@ -35,9 +35,9 @@ export default defineComponent({
       default: () => ({}),
     },
     prismLang: {
-      type: String,
+      type: String as PropType<CONFIGURED_LANGS_TYPE>,
       default: "html",
-      validator: (val: string) => ["html", "vsg"].includes(val),
+      validator: (val: string) => CONFIGURED_LANGS.includes(val as CONFIGURED_LANGS_TYPE),
     },
     jsx: {
       type: Boolean,
@@ -58,7 +58,7 @@ export default defineComponent({
        */
       stableCode: this.code,
       highlight: (() => (code: string) => code) as (
-        lang: "vue" | "vsg",
+        lang: CONFIGURED_LANGS_TYPE,
         jsxInExamples: boolean
       ) => (code: string, errorLoc: any) => string,
     };
@@ -73,7 +73,7 @@ export default defineComponent({
   },
   methods: {
     highlighter(code: string) {
-      return this.highlight(this.prismLang as "vue" | "vsg", this.jsx)(
+      return this.highlight(this.prismLang, this.jsx)(
         code,
         this.squiggles && this.error && this.error.loc
       );

src/Editor.vue

@@ -143,11 +143,7 @@ export default defineComponent({
 			}
 		},
 		async renderComponent(code: string) {
-			let options = defineComponent({
-				render() {
-					return h("div");
-				},
-			});
+			let options = defineComponent({});
 			let style;
 			try {
 				const renderedComponent = compileScript(
@@ -183,18 +179,6 @@ export default defineComponent({
 							concatenate,
 							h
 						) || {}));
-						if (options.render) {
-							const preview = this;
-							const originalRender = options.render;
-							options.render = function (...args: any[]) {
-								try {
-									return originalRender.call(this, ...args);
-								} catch (e) {
-									preview.handleError(e);
-									return;
-								}
-							};
-						}
 						options.name = "VueLiveCompiledExample";
 					};
 					await calcOptions();
@@ -218,7 +202,7 @@ export default defineComponent({
 						options.data = () => mergeData;
 					}
 				}
-				
+
 				const template = renderedComponent.raw.template
 				if (template) {
 					checkTemplate({
@@ -266,6 +250,8 @@ export default defineComponent({
 				return;
 			}
 
+			console.log({render:options.render})
+
 			this.previewedComponent = markRaw(options);
 			this.iteration = this.iteration + 1;
 			this.error = false;