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": {