Provisional

.eleventy.js

@@ -3,7 +3,6 @@ const viteConfig = require('./vite.config.js');
 const jsdom = require('jsdom');
 const { JSDOM } = jsdom;
 const util = require('util');
-const { default: vuePlugin } = require('@vitejs/plugin-vue');
 const fs = require('fs');
 
 const componentRegistry = {
@@ -13,16 +12,12 @@ const componentRegistry = {
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({ public: '/' });
-  eleventyConfig.addPassthroughCopy('node_modules');
 
   eleventyConfig.on(
     'eleventy.after',
     async ({ dir, results, runMode, outputMode }) => {
-      // Read more below
-      console.log(results[0].content);
       results.forEach((result) => {
         if (result.content) {
-          console.log(`writing to ${result.outputPath}`);
           fs.writeFileSync(result.outputPath, transformContent(result.content));
         }
       });
@@ -33,22 +28,15 @@ function tryComponents(doc) {
   for (const [key, value] of Object.entries(componentRegistry)) {
     let registeredComponent = key;
     let registeredComponentPath = value;
-    console.log(`${registeredComponent} at ${registeredComponentPath}`);
     let comp = doc.querySelector(registeredComponent);
 
-    if (!comp) {
-      continue;
-    }
+    if (!comp) continue;
 
     let childTemplate = comp.innerHTML;
-
-    //let props = Object.values(comp.attributes);
-
     let VueWrapper = `
 <div id="${registeredComponent}"></div>
 <script type=module>
 import {createApp} from "../node_modules/vue/dist/vue.esm-bundler.js";
-import ${registeredComponent} from "${registeredComponentPath}";
 
 createApp({
   data(){
@@ -64,7 +52,5 @@ createApp({
 `;
     let el = doc.createElement('div');
     el.setAttribute('injectionPoint', true);
-    el.innerHTML = VueWrapper;
-    comp.replaceWith(el);
   }
 }

.esmrc.json

@@ -1,5 +1,5 @@
 {
   "cjs": {
-    "dedefault": true
+    "dedefault": false
   }
 }

README.md

@@ -4,20 +4,12 @@
 
 I have wanted to use Vue components directly in my markup for a while. This is easily done by exporting Vue Components as Native Web Components (.ce.vue) but then you deal with other issues... some of these are dealt with in lit's 11ty plugin setup..
 
-I like the idea of just writing the components in and having an 11ty plugin add the vue scripts as necessary. Some of these can get prerendered and not hydrated, some can get hydrated and you can just use async components and determine rules for when the component is fetched.
-
 Now, we have a fully capable partial hydration setup and Fully functional vue components in SFC format that I can simply write as if they were HTML while I am composing layouts and pages.
 
 The best part is, I can use slotting to write embedded markup inside components. I can even use other components inside my components just by adding the Vue elements.
 
 ---
 
-Cons:
-
-its a vue only solution
-ships with vue runtime compiler
-have to register components manually (how can I automate this)
-
 Pros:
 
 its a vue only solution
@@ -38,7 +30,6 @@ no custom elements required
 ## Feature list to build
 
 - props seeker via attr
-- 11ty data props builder/helper functions (see nunjucks loops to build data object in jacobmilhorn.com proj)
 - multiple component loop (for the .componetn() func)
 - recursive component recognition in child template (see above item, they are the same thing)
 - automatic component registration based on whats in the `components` folder

index.html

@@ -1 +1 @@
-<myHeader :prop="jacob"><a href="/page">Page</a> </myHeader>
+<myHeader :prop="marczewski"><a href="/page">STAGE</a></myHeader>

vueTx.js

@@ -3,13 +3,10 @@ eleventyConfig.addTransform(
   function (content, outputPath) {
     let dom = new JSDOM(content);
     let doc = dom.window.document;
-    //replace Header with
 
     function tryComponents() {
       for (const [key, value] of Object.entries(componentRegistry)) {
-        console.log(key);
         let comp = doc.querySelector(registeredComponent);
-        console.log(comp);
         if (!comp) {
           return;
         }