feat: data-selector is not used anymore

BREAKING CHANGE: data-selector is obsolete, just always use filename
infodusha · Jul 28, 2024 · 0b7ee2d · 0b7ee2d
1 parent 9eb730f
commit 0b7ee2d
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 15 deletions.
diff --git a/DOCS.md b/DOCS.md
@@ -37,11 +37,9 @@ You can use `<template>` tag to define your component:
 </template>
 ```
 
-That is the only required element. That tag can be uses only once per file.
+That is the only required element. The tag can be used only once per file.
 
-You can use `<template data-selector="app-root">` to set selector for the component. If not specified, filename is used.
-
-Must include dash `-` and be unique.
+Filename is used as a selector for the component. It must include dash `-` and be unique.
 
 You can use `<template data-shadow="closed">` to enable [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#encapsulation_from_css).
 
@@ -72,7 +70,7 @@ Inside you can use [:host](https://developer.mozilla.org/en-US/docs/Web/CSS/:hos
 Inside your template you can use attributes to read component values itself (value would be set as child text):
 
 ```html
-<template data-selector="app-title">
+<template>
  <h1 data-attr="title"></h1>
 </template>
 ```
@@ -112,7 +110,7 @@ You can use `data-if-equal` attribute along with `data-if` to check if attribute
 You can use `<slot>` tag to define a place for elements, that are nested inside the component:
 
 ```html
-<template data-selector="app-card">
+<template>
  <div class="card">
    <slot></slot>
  </div>
@@ -130,7 +128,7 @@ So later you can use it like this:
 You can use `<slot name="header">` to have multiple slots:
 
 ```html
-<template data-selector="app-card">
+<template>
  <slot name="header"></slot>
  <div class="card">
    <slot></slot>

diff --git a/example/footer.html → example/app-footer.html b/example/footer.html → example/app-footer.html
@@ -1,4 +1,4 @@
-<template data-selector="app-footer" data-shadow="closed">
+<template data-shadow="closed">
 	<footer>Built by infodusha. Inspired by Vika.</footer>
 </template>
 

diff --git a/example/header.html → example/app-header.html b/example/header.html → example/app-header.html
@@ -1,4 +1,4 @@
-<template data-selector="app-header">
+<template>
 	<header>
 		<h1>define-html</h1>
 		<span class="counter">0</span>

diff --git a/example/components/card.html → example/components/app-card.html b/example/components/card.html → example/components/app-card.html
@@ -1,4 +1,4 @@
-<template data-selector="app-card">
+<template>
 	<slot name="header">
 		<h3 data-attr="header">No header</h3>
 	</slot>

diff --git a/example/index.html b/example/index.html
@@ -9,9 +9,14 @@
 			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 />
+		<link
+			rel="preload"
+			href="components/app-card.html"
+			as="fetch"
+			crossorigin
+		/>
+		<link rel="preload" href="app-header.html" as="fetch" crossorigin />
+		<link rel="preload" href="app-footer.html" as="fetch" crossorigin />
 		<script src="../dist/index.js" type="module"></script>
 	</head>
 	<body>

diff --git a/src/create-component.ts b/src/create-component.ts
@@ -27,11 +27,10 @@ export function createComponent(
 		definedElement.querySelector("template"),
 		"Template is required"
 	);
-	const filename = returnIfDefined(relativeTo.split("/").pop()).replace(
+	const selector = returnIfDefined(relativeTo.split("/").pop()).replace(
 		/\.html$/,
 		""
 	);
-	const selector = template.getAttribute("data-selector") ?? filename;
 	const useShadow = template.hasAttribute("data-shadow");
 
 	const styles: NodeListOf<HTMLStyleElement> =