fix(output): add prop slotContent for default slot content in output …

…html

docs/content/en/index.md

@@ -30,19 +30,8 @@ For cross-browser [compatibility](https://github.com/ungap/custom-elements#compa
 
 ### Live Example
 
-<client-only>
-  <custom-element-app-example title="Live Example">
-    <div>
-      Live Example Content
-    </div>
-  </custom-element-app-example>
-</client-only>
+<iframe style="width: 100%; height: 320px; border: none;" src="https://nuxt-custom-elements.grabarzundpartner.dev/example/component-app-example/"></iframe>
 
-<script type=text/javascript>
-  window.customPublicPath = 'https://nuxt-custom-elements.grabarzundpartner.dev/example/component-app-example/';
-</script>
-<script src="https://nuxt-custom-elements.grabarzundpartner.dev/example/component-app-example/component-app-example.modern.js" type="module"></script>
-<script src="https://nuxt-custom-elements.grabarzundpartner.dev/example/component-app-example/component-app-example.client.js" nomodule></script>
 
 #### Code
 

docs/content/en/options.md

@@ -88,26 +88,27 @@ Allows the targeted distribution of resources.
 
 ### Tag
 
-| Key       | Type                 | Requried | Description                                                                                                                              | Default     |
-| --------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `name`    | `String`             | yes      | Name of the Tag. Value will be converted to ParamCase later.<br><br>Example: `TagName` -> `tag-name`                                     |             |
-| `async`   | `Boolean`            |          | Components are loaded asynchronously. If there is more than one entry the async will lead to unwanted webpack chunk splitting.           | `false`     |
-| `path`    | `String`             |          | Path to the component to be called by the tag.                                                                                           | `false`     |
-| `options` | `Function`, `Object` |          | Options from custom-element. <br>[Learn more](https://github.com/karol-f/vue-custom-element#options) about `vue-custom-element` options. | `undefined` |
+| Key           | Type                 | Requried | Description                                                                                                                              | Default     |
+| ------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `name`        | `String`             | yes      | Name of the Tag. Value will be converted to ParamCase later.<br><br>Example: `TagName` -> `tag-name`                                     |             |
+| `async`       | `Boolean`            |          | Components are loaded asynchronously. If there is more than one entry the async will lead to unwanted webpack chunk splitting.           | `false`     |
+| `path`        | `String`             |          | Path to the component to be called by the tag.                                                                                           | `false`     |
+| `options`     | `Function`, `Object` |          | Options from custom-element. <br>[Learn more](https://github.com/karol-f/vue-custom-element#options) about `vue-custom-element` options. | `undefined` |
+| `slotContent` | `String`             |          | Default slot content for generated html entry output.                                                                                    | `undefined` |
 
 #### Important
 
 You can set as `object` or when using functions in options, use `function`.
 
 ```js
 {
-  name: 'ComponentAppBundle',
+  name: 'ComponentAppExample',
   tags: [
     // with function call
     {
       async: true,
-      name: 'CustomElementAppI18n',
-      path: '@/components/apps/AppI18n',
+      name: 'CustomElementAppExample',
+      path: '@/components/apps/AppExample',
       options () {
         return {
           props: {
@@ -117,18 +118,20 @@ You can set as `object` or when using functions in options, use `function`.
             console.info('constructorCallback', this);
           }
         };
-      }
+      },
+      slotContent: '<div>Slot Content!</div>'
     },
     // without function call
     {
       async: true,
-      name: 'CustomElementAppI18n',
-      path: '@/components/apps/AppI18n',
+      name: 'CustomElementAppExample',
+      path: '@/components/apps/AppExample',
       options: {
         props: {
           base: './'
         }
-      }
+      },
+      slotContent: '<div>Slot Content!</div>'
     }
   ]
 }

example/components/apps/AppExample.vue

@@ -59,14 +59,14 @@ export default {
     min-height: 160px;
     padding: 15px;
     margin-top: 20px;
+    font-family: sans-serif;
 
     & > div,
     & >>> div {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
-      font-family: sans-serif;
       font-size: 30px;
       font-weight: 700;
     }

example/nuxt.config.js

@@ -133,9 +133,10 @@ module.exports = {
             path: '@/components/apps/AppExample',
             options: {
               props: {
-                title: 'Prop. Title'
+                title: 'Live Example'
               }
-            }
+            },
+            slotContent: '<div>Live Example Content</div>'
           }
         ]
       }]) || []),

lib/utils/tags.js

@@ -31,32 +31,12 @@ function getTagHTMLFromEntry (entry) {
       }
     }
 
-    return `<${tag.name} ${props.join(' ')}></${tag.name}>`;
-  });
-}
-
-function getTagHTMLFromEntries (entries) {
-  const tags = entries.reduce((result, entry) => {
-    result.push(...getTagsFromEntry(entry));
-    return result;
-  }, []);
-  return tags.map((tag) => {
-    const options = tag.options || {};
-    const props = (Object.keys(options.props || {})).reduce((result, prop) => {
-      const value = options.props[String(prop)];
-      if (value) {
-        result.push(`${paramCase(prop)}="${value}"`);
-      }
-      return result;
-    }, [
-      ''
-    ]);
-    return `<${tag.name}${props.join(' ')}></${tag.name}>`;
+    const slotContent = tag.slotContent || '';
+    return `<${tag.name} ${props.join(' ')}>${slotContent}</${tag.name}>`;
   });
 }
 
 module.exports = {
   getTagsFromEntry,
-  getTagHTMLFromEntry,
-  getTagHTMLFromEntries
+  getTagHTMLFromEntry
 };

package.json

@@ -56,6 +56,7 @@
     "babel-jest": "26.6.3",
     "commitlint": "12.0.1",
     "core-js": "3.9.1",
+    "cors": "^2.8.5",
     "eslint": "7.22.0",
     "eslint-formatter-json-relative": "0.1.0",
     "eslint-plugin-no-secrets": "0.8.9",

tools/express-server.js

@@ -1,6 +1,9 @@
 const { paramCase } = require('change-case');
 const express = require('express');
+const cors = require('cors');
 const app = express();
+
+app.use(cors());
 app.disable('x-powered-by');
 
 const dist = getDist();