New test branch

.eleventy.js

@@ -1,41 +1,29 @@
 const EleventyVitePlugin = require('@11ty/eleventy-plugin-vite');
 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 util = require('futil');
+
+
 
 const componentRegistry = {
  myHeader: '../components/myHeader.vue',
  myFooter: '../components/myFooter.vue',
+ Loading: '../components/Loading.vue'
 };
 
 module.exports = function (eleventyConfig) {
- eleventyConfig.addPassthroughCopy({ public: '/' });
- eleventyConfig.addPassthroughCopy('components');
- eleventyConfig.addPassthroughCopy('node_modules');
-
- eleventyConfig.on(
- 'eleventy.after',
+ eleventyConfig.addPassthroughCopy({ public: '/' }); eleventyConfig.addPassthroughCopy('components');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));
- }
- });
- }
- );
-
- eleventyConfig.addPlugin(EleventyVitePlugin, {
- tempFolderName: '.11ty-vite', // Default name of the temp folder
-
- // Defaults are shown:
- viteOptions: viteConfig,
- });
+
+ return {
+ dir: {
+ input: 'src',
+ },
+ };
 };
 
 function transformContent(content) {
@@ -53,13 +41,18 @@ function tryComponents(doc) {
  let registeredComponentPath = value;
  console.log(`${registeredComponent} at ${registeredComponentPath}`);
  let comp = doc.querySelector(registeredComponent);
-
  if (!comp) {
  continue;
  }
 
  let childTemplate = comp.innerHTML;
 
+ let componentString = '';
+
+ let tempComponentReg = [];
+
+ //check comp recursively against component registry
+
  //let props = Object.values(comp.attributes);
 
  let VueWrapper = `
@@ -85,4 +78,4 @@ createApp({
  el.innerHTML = VueWrapper;
  comp.replaceWith(el);
  }
-}
+}

.eleventyignore

@@ -0,0 +1 @@
+README.md

.esmrc.json

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

README.md

@@ -1,4 +1,4 @@
-# Pragmatic Vue Components 🔌
+# Pragmatic Vue Components 
 
 ## Use Vue Components to author HTML/nunjucks/liquid layouts in 11ty SSG
 
@@ -38,10 +38,7 @@ 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
 - automatic node modules aliasing in vite config
 - proper 11ty plugin format in an `.eleventy.js`
--
+

components/Loading.vue

@@ -1,3 +1,3 @@
 <template>
- <div>:)</div>
+ <div>:()</div>
 </template>

components/SlottedComp.vue

@@ -1,4 +1,4 @@
 <template>
  <h2>Slot here</h2>
- <slot>steady</slot>
+ <slot>steady does it champo</slot>
 </template>

components/myHeader.vue

@@ -17,16 +17,16 @@ const AsyncComp = defineAsyncComponent({
  return new Promise((resolve) => {
  setTimeout(() => {
  resolve(import('./SlottedComp.vue'));
- }, 2000);
+ }, 5000);
  });
  },
  loadingComponent: Loading,
- delay: 100,
+ delay: 400,
 });
 
-const clicker = ref(false);
+const clicker = ref(true);
 
 const clicked = () => {
  clicker.value = true;
 };
-</script>
+</script>