diff --git a/.eleventy.cjs b/.eleventy.cjs index 8a623a3e..1843f752 100644 --- a/.eleventy.cjs +++ b/.eleventy.cjs @@ -11,7 +11,7 @@ module.exports = function (eleventyConfig) { return { dir: { input: 'docs-src', - output: 'docs', + output: 'dist/docs', }, templateExtensionAliases: { '11ty.cjs': '11ty.js', diff --git a/.gitignore b/.gitignore index 7f7160e9..e8e05981 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,5 @@ /node_modules/ -/lib/ -/test/ +/dist/ custom-elements.json -# top level source -my-element.js -my-element.js.map -my-element.d.ts -my-element.d.ts.map # only generated for size check my-element.bundled.js \ No newline at end of file diff --git a/dev/index.html b/dev/index.html index 8ecd73c6..6acb27d0 100644 --- a/dev/index.html +++ b/dev/index.html @@ -6,7 +6,7 @@ <my-element> Demo - + - -

This is child content

- -

CSS

-
p {
  border: solid 1px blue;
  padding: 8px;
}
-

HTML

-
<my-element>
  <p>This is child content</p>
</my-element>
- - - - - - - - - - \ No newline at end of file diff --git a/docs/examples/name-property/index.html b/docs/examples/name-property/index.html deleted file mode 100644 index 4286e0e3..00000000 --- a/docs/examples/name-property/index.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - <my-element> ⌲ Examples ⌲ Name Property - - - - - - - - - -
-

<my-element>

-

A web component just for me.

-
- - -
-
- -

Example: Name Property

-
- -
-

-

HTML

-
<my-element name="Earth"></my-element>
- -
-
- -
-
- - - - \ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index ad84ff85..00000000 --- a/docs/index.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - <my-element> ⌲ Home - - - - - - - - - -
-

<my-element>

-

A web component just for me.

-
- - -
-
-

<my-element>

-

<my-element> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.

-

As easy as HTML

-
-
-

<my-element> is just an HTML element. You can it anywhere you can use HTML!

-
<my-element></my-element>
-
-
-

-
-
-

Configure with attributes

-
-
-

<my-element> can be configured with attributed in plain HTML.

-
<my-element name="HTML"></my-element>
-
-
-

-
-
-

Declarative rendering

-
-
-

<my-element> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html

-
import {html, render} from 'lit-html';

const name = 'lit-html';

render(
  html`
    <h2>This is a &lt;my-element&gt;</h2>
    <my-element .name=${name}></my-element>
  `,
  document.body
);
-
-
-

This is a <my-element>

- -
-
- -
-
- - - - \ No newline at end of file diff --git a/docs/install/index.html b/docs/install/index.html deleted file mode 100644 index 05ad1150..00000000 --- a/docs/install/index.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - <my-element> ⌲ Install - - - - - - - - - -
-

<my-element>

-

A web component just for me.

-
- - -
-
-

Install

-

<my-element> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.

-

Local Installation

-
npm i my-element
-

CDN

-

npm CDNs like unpkg.com can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.

-

For this element to work from unpkg.com specifically, you need to include the ?module query parameter, which tells unpkg.com to rewrite "bare" module specifiers to full URLs.

-

HTML

-
<script type="module" src="https://unpkg.com/my-element?module"></script>
-

JavaScript

-
import {MyElement} from 'https://unpkg.com/my-element?module';
- -
-
- - - - \ No newline at end of file diff --git a/docs/prism-okaidia.css b/docs/prism-okaidia.css deleted file mode 100644 index cf04068a..00000000 --- a/docs/prism-okaidia.css +++ /dev/null @@ -1,123 +0,0 @@ -/** - * okaidia theme for JavaScript, CSS and HTML - * Loosely based on Monokai textmate theme by http://www.monokai.nl/ - * @author ocodia - */ - -code[class*="language-"], -pre[class*="language-"] { - color: #f8f8f2; - background: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #272822; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #8292a2; -} - -.token.punctuation { - color: #f8f8f2; -} - -.token.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - color: #f92672; -} - -.token.boolean, -.token.number { - color: #ae81ff; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #a6e22e; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color: #f8f8f2; -} - -.token.atrule, -.token.attr-value, -.token.function, -.token.class-name { - color: #e6db74; -} - -.token.keyword { - color: #66d9ef; -} - -.token.regex, -.token.important { - color: #fd971f; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/package.json b/package.json index a17f1f2c..eea7f6d2 100644 --- a/package.json +++ b/package.json @@ -3,24 +3,24 @@ "private": true, "version": "1.0.4", "description": "A simple web component", - "main": "my-element.js", - "module": "my-element.js", + "main": "./dist/src/my-element.js", + "module": "./dist/src/my-element.js", "type": "module", "scripts": { "build": "tsc", "build:watch": "tsc --watch", - "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}", + "clean": "rimraf dist/src", "lint": "npm run lint:lit-analyzer && npm run lint:eslint", "lint:eslint": "eslint 'src/**/*.ts'", "lint:lit-analyzer": "lit-analyzer", "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write", "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen", - "docs:clean": "rimraf docs", + "docs:clean": "rimraf dist/docs", "docs:gen": "eleventy --config=.eleventy.cjs", "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch", - "docs:build": "rollup -c --file docs/my-element.bundled.js", - "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/", - "docs:serve": "wds --root-dir=docs --node-resolve --watch", + "docs:build": "rollup -c --file dist/docs/my-element.bundled.js", + "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css dist/docs/", + "docs:serve": "wds --root-dir=dist/docs --node-resolve --watch", "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"", "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch", "serve": "wds --watch", diff --git a/rollup.config.js b/rollup.config.js index a00e9b85..ca97e777 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -10,7 +10,7 @@ import resolve from '@rollup/plugin-node-resolve'; import replace from '@rollup/plugin-replace'; export default { - input: 'my-element.js', + input: './dist/src/my-element.js', output: { file: 'my-element.bundled.js', format: 'esm', diff --git a/src/test/my-element_test.ts b/test/my-element_test.ts similarity index 97% rename from src/test/my-element_test.ts rename to test/my-element_test.ts index ce670906..090bf347 100644 --- a/src/test/my-element_test.ts +++ b/test/my-element_test.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: BSD-3-Clause */ -import {MyElement} from '../my-element.js'; +import {MyElement} from '../my-element'; import {fixture, assert} from '@open-wc/testing'; import {html} from 'lit/static-html.js'; diff --git a/tsconfig.json b/tsconfig.json index cbdb1382..9912933c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,8 +7,8 @@ "declarationMap": true, "sourceMap": true, "inlineSources": true, - "outDir": "./", - "rootDir": "./src", + "outDir": "./dist", + "rootDir": "./", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, @@ -28,6 +28,9 @@ } ] }, - "include": ["src/**/*.ts"], + "include": [ + "src/**/*.ts", + "src/test/**/*_test.ts" + ], "exclude": [] } diff --git a/web-test-runner.config.js b/web-test-runner.config.js index 09d67918..8d00618b 100644 --- a/web-test-runner.config.js +++ b/web-test-runner.config.js @@ -91,7 +91,7 @@ try { // https://modern-web.dev/docs/test-runner/cli-and-configuration/ export default { rootDir: '.', - files: ['./test/**/*_test.js'], + files: ['./dist/test/**/*_test.js'], nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []}, preserveSymlinks: true, browsers: commandLineBrowsers ?? Object.values(browsers),