Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved build #42

Merged
merged 3 commits into from
Dec 18, 2023
Merged

Improved build #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28e778e
Provide JavaScript modules in addition to bundle
hupf Nov 23, 2023
a968093
Update dependencies (minor updates)
hupf Dec 18, 2023
249bb97
Use prettier-plugin-sort-imports
hupf Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions .prettierrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
const config = {
/**
* Enable plugin for automatically sorting of imports
*/
plugins: ["@trivago/prettier-plugin-sort-imports"],
importOrderParserPlugins: ["typescript", "decorators-legacy"],

/**
* Custom sorting of imports, first lit stuff, then other third
* party libs, then own modules
*/
importOrder: [
"^lit$",
"^lit/.*$",
"^@lit/.*$",
"<THIRD_PARTY_MODULES>",
"^[./]",
],

/**
* Whether to separate sorting groups (as defined above) with
* newline
*/
// importOrderSeparation: true,

/**
* Whether to sort the specifiers on the left hand side of the
* import statement
*/
importOrderSortSpecifiers: true,
};

export default config;
13 changes: 11 additions & 2 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
# Puzzle Shell Changelog

# ?

# 4.0.0

- BREAKING CHANGE: Provide JavaScript modules (ES2021) with TypeScript definitions in addition to the pre-bundled version which includes Lit. This is the [recommended way of publishing Web Components](https://lit.dev/docs/tools/publishing/#publishing-modern-javascript) and allows to deduplicate Lit. Unfortunately this change breaks with the existing import paths (see [README.md](./README.md#usage) for more details):
- Bundled:
- `@puzzleitc/puzzle-shell` → `@puzzleitc/puzzle-shell/bundle.js` <br>
or via CDN: `https://unpkg.com/@puzzleitc/puzzle-shell/dist/puzzle-shell.js` → `https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js`
- `@puzzleitc/puzzle-shell/dist/style.css` → `@puzzleitc/puzzle-shell/style.css` <br>
or via CDN: `https://unpkg.com/@puzzleitc/puzzle-shell/dist/style.css` (no change)
- JavaScript modules (new):
- `import "@puzzleitc/puzzle-shell"` (all components)
- `import "@puzzleitc/puzzle-shell/components/Topbar.js"` (specific components)
- Update the dependencies (including upgrade to Lit 3 & Vite 5, using Node 20).

# 3.0.1
Expand Down
74 changes: 42 additions & 32 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,7 @@ Part of this project is the [Puzzle Shell Storybook](https://puzzle.github.io/pu

## Usage

### Without NPM & Build Step

You can reference the package from a [NPM CDN](https://duckduckgo.com/?q=npm+cdn&ia=web) (or self-serve it) and use it right-away:

```html
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/@puzzleitc/puzzle-shell/dist/style.css"
/>
<script
type="module"
src="https://unpkg.com/@puzzleitc/puzzle-shell/dist/puzzle-shell.js"
></script>
</head>

<body>
<pzsh-container>
<pzsh-topbar></pzsh-topbar>
<main></main>
<pzsh-footer></pzsh-footer>
</pzsh-container>
</body>
</html>
```

### With NPM & Bundler
### JavaScript Modules (ESM)

You can install this package with NPM:

Expand All @@ -63,16 +36,53 @@ Or PNPM:
pnpm add @puzzleitc/puzzle-shell
```

With a bundler like [Vite](https://vitejs.dev/) you can import the package in your main JavaScript file:
Then, with a bundler like [Vite](https://vitejs.dev/), you can import the package in your main JavaScript file to include all components:

```javascript
import "@puzzleitc/puzzle-shell";
import "@puzzleitc/puzzle-shell/style.css";
```

Or you can import specific components:

```javascript
import "@puzzleitc/puzzle-shell/components/Topbar.js";
import "@puzzleitc/puzzle-shell/style.css"; // Only once
```

And and import the styles in your CSS file:
Either way the components are then ready to use in your markup:

```html
<pzsh-topbar></pzsh-topbar>
```

We suggest to include the library this way if possible.

### Bundled Version

Alternatively you can use a pre-bundled version of the Puzzle Shell that includes Lit as a carefree package. You can even reference the package from a [NPM CDN](https://duckduckgo.com/?q=npm+cdn&ia=web) (or self-serve it) and include it as follows:

```css
@import url("@puzzleitc/puzzle-shell/style.css");
```html
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/@puzzleitc/puzzle-shell/dist/style.css"
/>
<script
type="module"
src="https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js"
></script>
</head>

<body>
<pzsh-container>
<pzsh-topbar></pzsh-topbar>
<main></main>
<pzsh-footer></pzsh-footer>
</pzsh-container>
</body>
</html>
```

## Linting etc.
Expand Down
Loading