chore: move customElement into svg-to-inline.ts

tiagoporto · Dec 1, 2024 · 9721562 · 9721562
1 parent bc190b0
commit 9721562
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ npm i svg-to-inline
 
 ```html
 <script type="module">
-  import 'svg-to-inline/SvgToInline.js'
+  import 'svg-to-inline/svg-to-inline.js'
 </script>
 
 <svg-to-inline

diff --git a/demo/demo.html b/demo/demo.html
@@ -9,12 +9,7 @@
   </head>
   <body>
     <script type="module">
-      import '../dist/src/SvgToInline.js'
-      // import { html, render } from 'lit-html'
-
-      // const element = html``
-
-      // render(element, document.body)
+      import '../dist/src/svg-to-inline.js'
     </script>
 
     <svg-to-inline

diff --git a/package.json b/package.json
@@ -27,11 +27,12 @@
   },
   "type": "module",
   "customElements": "custom-elements.json",
-  "types": "dist/SvgToInline.d.ts",
-  "main": "dist/SvgToInline.js",
-  "module": "dist/SvgToInline.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "exports": {
-    ".": "./dist/SvgToInline.js",
+    ".": "./dist/index.js",
+    "./svg-to-inline.js": "./dist/svg-to-inline.js",
     "./customElements": "./custom-elements.json"
   },
   "files": [

diff --git a/src/SvgToInline.ts b/src/SvgToInline.ts
@@ -1,12 +1,11 @@
 import { html, LitElement } from 'lit'
 import type { TemplateResult } from 'lit'
-import { state, customElement, property } from 'lit/decorators.js'
+import { state, property } from 'lit/decorators.js'
 import { throttle } from 'throttle-debounce'
 import { fetchFile } from './utils/fetchFile.js'
 import { convertStringToNode } from './utils/convertStringToNode.js'
 import { addClassNames } from './utils/addClassNames.js'
 
-@customElement('svg-to-inline')
 export class SvgToInline extends LitElement {
   @state()
   private _svgDOM: string | null = null
@@ -17,10 +16,10 @@ export class SvgToInline extends LitElement {
   @state()
   private _throttleLazyFetchSVG: (event: Event) => void
 
-  @property()
-  path?: string
+  @property({ type: String })
+  path = ''
 
-  @property()
+  @property({ type: String })
   className = ''
 
   @property()
@@ -30,7 +29,7 @@ export class SvgToInline extends LitElement {
   placeholder?: TemplateResult | string
 
   @property({ type: Boolean })
-  lazy: boolean = false
+  lazy = false
 
   constructor() {
     super()

diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1 @@
+export { SvgToInline } from './SvgToInline.js'
diff --git a/src/Index.story.mdx → src/readme.story.mdx b/src/Index.story.mdx → src/readme.story.mdx
diff --git a/src/SvgToInline.stories.ts → src/svg-to-inline.stories.ts b/src/SvgToInline.stories.ts → src/svg-to-inline.stories.ts
@@ -1,8 +1,8 @@
 import { html } from 'lit'
 import type { TemplateResult } from 'lit'
-import type { Meta, StoryObj } from '@storybook/web-components'
+import type { Meta } from '@storybook/web-components'
 
-import './SvgToInline.ts'
+import './svg-to-inline.js'
 
 interface ArgTypes {
   path: string

diff --git a/src/SvgToInline.test.ts → src/svg-to-inline.test.ts b/src/SvgToInline.test.ts → src/svg-to-inline.test.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit'
 import { fixture, expect } from '@open-wc/testing'
-import type { SvgToInline } from './SvgToInline.js'
-import './SvgToInline.js'
+import type { SvgToInline } from './'
+import './svg-to-inline.js'
 
 describe('SvgToInline', () => {
   // it('test _ and ; value')

diff --git a/src/svg-to-inline.ts b/src/svg-to-inline.ts
@@ -0,0 +1,3 @@
+import { SvgToInline } from './SvgToInline.js'
+
+window.customElements.define('svg-to-inline', SvgToInline)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { SvgToInline } from './SvgToInline.js'

		window.customElements.define('svg-to-inline', SvgToInline)