Merge pull request #26 from NxtLvLSoftware/dev-to-dist

Merge dev changes to dist

Author: JackNoordhuis

.github/workflows/pages-publish.yml

@@ -32,7 +32,7 @@ jobs:
 
       - name: Remove README.md index lines
         run: |
-          sed -i '28,45d' README.md
+          sed -i '28,46d' README.md
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3

README.md

@@ -2,7 +2,7 @@
   <a href="https://nxtlvlsoftware.github.io/alpine-typescript/"><picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/NxtLvLSoftware/alpine-typescript/dist/.github/banner-dark.png">
     <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/NxtLvLSoftware/alpine-typescript/dist/.github/banner-light.png">
-    <img alt="Project Banner (@nxtlvlsoftware/alpine-typescript)" src="https://raw.githubusercontent.com/NxtLvLSoftware/alpine-typescript/dist/.github/.github/banner-light.png" width="350" height="160" style="max-width: 100%;">
+    <img alt="Project Banner (@nxtlvlsoftware/alpine-typescript)" src="https://raw.githubusercontent.com/NxtLvLSoftware/alpine-typescript/dist/.github/banner-light.png" width="350" height="160" style="max-width: 100%;">
   </picture></a>
 </p>
 
@@ -41,6 +41,7 @@
   * [Using Components](#using-components)
 * [Contributing](#contributing)
   * [Issues](#issues)
+  * [Pull Requests](#pull-requests)
 * [License](#license-information)
 
 <br /><hr /><br />
@@ -59,29 +60,34 @@ $ npm install --save @nxtlvlsoftware/alpine-typescript
 ```
 The package requires manual initialization in the browser as we don't assume a specific use-case:
 
-Using `Alpine.plugin()`:
+Using `Alpine.plugin()` (ESModule syntax):
 ```typescript
 import Alpine from 'alpinejs';
 
 window.Alpine = Alpine;
 
+// {default as componentPlugin} also works
 import {componentPlugin} from '@nxtlvlsoftware/alpine-typescript';
 
 window.addEventListener('alpine-components:init', () => {
-  // window.Alpine.Components.register();
+  window.Alpine.Components.registerAll({
+    //
+  });
 });
 
 window.Alpine.plugin(componentPlugin);
 window.Alpine.start();
 ```
-Using the default export:
+Using the default export (CommonJS syntax):
 ```typescript
 import Alpine from 'alpinejs';
 
 window.Alpine = Alpine;
 
 window.addEventListener('alpine-components:init', () => {
-  // window.Alpine.Components.register();
+  window.Alpine.Components.registerAll({
+    //
+  });
 });
 
 window.Alpine.plugin(require('@nxtlvlsoftware/alpine-typescript'));
@@ -90,36 +96,39 @@ window.Alpine.start();
 This is the easiest way to get started in existing projects but doesn't offer a way to modify the
 default options provided the package.
 
-Using `AlpineComponents.bootstrap()`:
+Using `AlpineComponents.bootstrap()` (all examples in ESModule syntax):
 ```typescript
-import Alpine from 'alpinejs';
-
-window.Alpine = Alpine;
-
 import {AlpineComponents} from '@nxtlvlsoftware/alpine-typescript';
 
 AlpineComponents.bootstrap({
+  bootstrapAlpine: true,
   components: {
     //
-  }});
+  }
+});
 ```
-The default options are best suited to new projects and automatically starts Alpine for you.
-To integrate into existing projects seamlessly, just pass in an options object:
+The default options are best suited to new projects as `Alpine.start()` will be called for you.
+To integrate into existing projects seamlessly, just set `startAlpine` to `false` on the options
+object:
 ```typescript
+import Alpine from 'alpinejs';
+
+window.Alpine = Alpine;
+
 import {AlpineComponents} from '@nxtlvlsoftware/alpine-typescript';
 
 AlpineComponents.bootstrap({
+  startAlpine: false,
+  logErrors: true, // should only enable this in dev enviroments for debugging
   components: {
     //
-  },
-  startAlpine: false,
-  logErrors: true // should only enable this in dev enviroments for debugging
-}); // pass the Alpine object explicity if you aren't following the default convention
+  }
+});
 
 window.Alpine.start();
 ```
-If you aren't following the default convention of defining `window.Alpine` after importing Alpine
-just pass it after your options object:
+If you aren't following the default convention of defining `window.Alpine` after importing Alpine,
+just pass it as the second argument to the `AlpineComponents.bootstrap()` call:
 ```typescript
 import Alpine from 'alpinejs';
 
@@ -129,10 +138,10 @@ import {AlpineComponents} from '@nxtlvlsoftware/alpine-typescript';
 
 const isProduction = () => false; // equivelent would be injected/definied server-side by your framework
 AlpineComponents.bootstrap({
-    components: {
-      //
-    },
-    logErrors: !isProduction()
+  components: {
+    //
+  },
+  logErrors: !isProduction()
 }, myAlpine);
 
 // might break alpine or other packages by defining after init but we support it ¯\_(ツ)_/¯
@@ -469,15 +478,23 @@ The main drawback of using this library is the added compilation step needed to
 Alpine is an elegant library that provides a thin layer on-top of vanilla JavaScript. Using
 Alpine the way it was intended is the way to go until your list of components grows and you
 need a way to organise them. If you're not already using a bundler in your project (webpack,
-Vite, Rollup, etc) then this probably isn't for you.
+Vite, Rollup, etc.) then this probably isn't for you.
 
 ## Contributing
-
 #### Issues
-
 Found a problem with this project? Make sure to open an issue on the [issue tracker](https://github.com/NxtLvLSoftware/alpine-typescript/issues)
 and we'll do our best to get it sorted!
 
+#### Pull Requests
+Pull requests will be reviewed by maintainers when they are available.
+
+Depending on the changes, maintainers might ask you to make changes to the PR to fix problems
+or to improve the code. Do not delete your fork while your pull request remains open, otherwise
+you won't be able to make any requested changes and the PR will end up being declined.
+
+By proposing a pull request, you agree to your code being distributed under [this projects license](https://github.com/NxtLvlSoftware/alpine-typescript/blob/dev/LICENSE).
+
+
 ## License Information
 
 [`nxtlvlsoftware/alpine-typescript`](https://github.com/NxtLvlSoftware/alpine-typescript) is open-sourced software,

examples/package/package.json

@@ -1,16 +1,31 @@
 {
   "name": "alpine-typescript-package-example",
-  "type": "module",
-  "version": "0.0.1",
   "description": "Example Alpine.js components package.",
-  "author": "Jack Noordhuis <me@jacknoordhuis.net>",
+  "version": "0.0.1",
   "license": "MIT",
+  "author": {
+    "name": "Jack Noordhuis",
+    "email": "me@jacknoordhuis.net",
+    "url": "https://jacknoordhuis.net"
+  },
+  "keywords": [
+    "component",
+    "alpine",
+    "javascript",
+    "typescript",
+    "js",
+    "ts"
+  ],
+  "repository": "NxtLvlSoftware/alpine-typescript",
+  "homepage": "https://nxtlvlsoftware.github.io/alpine-typescript/",
+  "bugs": {
+    "url": "https://github.com/NxtLvlSoftware/alpine-typescript/issues"
+  },
+  "type": "module",
   "main": "index.js",
   "files": [
-    "index.ts",
     "index.d.ts",
     "index.js",
-    "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.js"
   ],
@@ -19,14 +34,6 @@
     "build-ci": "tsc --pretty false --inlineSourceMap --removeComments --listEmittedFiles -p ./",
     "dev": "tsc --watch -p ./"
   },
-  "keywords": [
-    "component",
-    "alpine",
-    "javascript",
-    "typescript",
-    "js",
-    "ts"
-  ],
   "dependencies": {
     "@nxtlvlsoftware/alpine-typescript": "file:../../",
     "@types/alpinejs": "^3.7.2"

examples/project/cssnano.config.cjs

@@ -0,0 +1,7 @@
+const advancedPreset = require('cssnano-preset-advanced');
+
+module.exports = advancedPreset({
+	discardComments: {
+		removeAll: true,
+	}
+});