feat: selector read from filename

infodusha · Sep 7, 2023 · 882dc0c · 882dc0c
1 parent 60af603
commit 882dc0c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -12,13 +12,13 @@ Add link to preload external html file and define-html script in `head`:
 ```html
 <head>
     <!-- Other tags here -->
-    <link rel="preload" href="content.html" as="fetch" crossorigin />
+    <link rel="preload" href="app-content.html" as="fetch" crossorigin />
     <script src="https://unpkg.com/define-html" type="module"></script>
 </head>
 ```
-Where `content.html` is:
+Where `app-content.html` is:
 ```html
-<template data-selector="app-content">
+<template>
     Lorem ipsum
 </template>
 ```

diff --git a/example/components/root.html → example/components/app-root.html b/example/components/root.html → example/components/app-root.html
@@ -1,4 +1,4 @@
-<template data-selector="app-root">
+<template>
     <app-header></app-header>
     <div class="cards">
         <app-card header="Easy to install">

diff --git a/example/index.html b/example/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>define-html</title>
-    <link rel="preload" href="components/root.html" as="fetch" crossorigin />
+    <link rel="preload" href="components/app-root.html" as="fetch" crossorigin />
     <link rel="preload" href="components/card.html" as="fetch" crossorigin />
     <link rel="preload" href="header.html" as="fetch" crossorigin />
     <link rel="preload" href="footer.html" as="fetch" crossorigin />

diff --git a/src/create-component.ts b/src/create-component.ts
@@ -12,7 +12,8 @@ interface Disconnected {
 
 export function createComponent(definedElement: Document, relativeTo: string): [string, typeof HTMLElement] {
     const template = returnIfDefined(definedElement.querySelector('template'), 'Template is required');
-    const selector = returnIfDefined(template.getAttribute('data-selector'), 'data-selector is required');
+    const filename = returnIfDefined(relativeTo.split('/').pop()).replace(/\.html$/, '');
+    const selector = template.getAttribute('data-selector') ?? filename;
     const useShadow = template.hasAttribute('data-shadow');
 
     const styles: NodeListOf<HTMLStyleElement> = definedElement.querySelectorAll('style:not([data-global])');