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

Merge dev changes to dist

Author: JackNoordhuis

README.md

@@ -263,10 +263,12 @@ $ touch src/Plugin.ts
 ```
 Copy the following and change the namespace to the name of your package:
 ```typescript
+import type Alpine from 'alpinejs';
+
 import {
   AlpineComponents,
   makeAlpineConstructor,
-  type Globals
+  Globals
 } from '@nxtlvlsoftware/alpine-typescript';
 
 import {
@@ -292,21 +294,27 @@ export namespace MyComponents {
 
   export function bootstrap(
     options: Partial<Options> = defaultOptions,
-    alpinejs: Globals.Alpine = window.Alpine
+    alpinejs: typeof Alpine = window.Alpine
   ): void {
     const opts: Options = {
       ...defaultOptions,
       ...options
     };
 
-    // make typescript happy
-    let alpine = <Globals.AlpineWithComponents>alpinejs;
-
     document.addEventListener('alpine:init', () => {
       // Register any alpine stores your components rely on here.
     });
 
     document.addEventListener('alpine-components:init', () => {
+      // make typescript happy
+      let alpine = Globals.castToAlpineWithComponents(alpinejs);
+      if (alpine === null) {
+        if (opts.logErrors) {
+          console.error('Alpine object does not have Components properties injected. Did the Components package boot properly?');
+        }
+        return;
+      }
+
       // Basic registration with support for consumers to provide their own
       // name for use with x-data.
       alpine.Components.register(MyComponent, opts.myComponentName);
@@ -315,7 +323,7 @@ export namespace MyComponents {
 
     // Allow booting alpine and the components package.
     if (opts.bootstrapComponents) {
-      AlpineComponents.bootstrap(opts, alpine);
+      AlpineComponents.bootstrap(opts, alpinejs);
     }
   }
 

examples/package/package.json

@@ -30,15 +30,15 @@
     "src/**/*.js"
   ],
   "scripts": {
-    "build": "tsc --inlineSourceMap --removeComments -p ./",
-    "build-ci": "tsc --pretty false --inlineSourceMap --removeComments --listEmittedFiles -p ./",
+    "build": "tsc --inlineSourceMap -p ./",
+    "build-ci": "tsc --pretty false --inlineSourceMap --listEmittedFiles -p ./",
     "dev": "tsc --watch -p ./"
   },
   "dependencies": {
-    "@nxtlvlsoftware/alpine-typescript": "file:../../",
-    "@types/alpinejs": "^3.7.2"
+    "@nxtlvlsoftware/alpine-typescript": "file:../../"
   },
   "devDependencies": {
-    "typescript": "^5.1.6"
+    "@types/alpinejs": "^3.0.0",
+    "typescript": "^5.2.2"
   }
 }

examples/package/src/Plugin.ts

@@ -1,7 +1,9 @@
+import type Alpine from 'alpinejs';
+
 import {
 	AlpineComponents,
 	makeAlpineConstructor,
-	type Globals
+	Globals
 } from '@nxtlvlsoftware/alpine-typescript';
 
 import {
@@ -35,23 +37,29 @@ export namespace MyComponents {
 
 	export function bootstrap (
 		options: Partial<Options> = defaultOptions,
-		alpinejs: Globals.Alpine = window.Alpine
+		alpinejs: typeof Alpine = window.Alpine
 	): void {
 		const opts: Options = {
 			...defaultOptions,
 			...options
 		};
 
-		// make typescript happy
-		let alpine = <Globals.AlpineWithComponents>alpinejs;
-
 		document.addEventListener('alpine:init', () => {
 			// Register any alpine stores your components rely on here.
 			// You can pull them and any other dependencies in as default params
 			// for a custom component constructor when alpine-components:init is fired.
 		});
 
 		document.addEventListener('alpine-components:init', () => {
+			// make typescript happy
+			let alpine = Globals.castToAlpineWithComponents(alpinejs);
+			if (alpine === null) {
+				if (opts.logErrors) {
+					console.error('Alpine object does not have Components properties injected. Did the Components package boot properly?');
+				}
+				return;
+			}
+
 			// Basic registration by falling back to the prototype name when left undefined.
 			// Can be used in your HTML with: x-data="ToggleComponent([true|false])"
 			alpine.Components.register(AlertComponent);
@@ -90,7 +98,7 @@ export namespace MyComponents {
 		// Allow booting alpine and the components package with a single call to our
 		// bootstrap function. This makes the client script a bit simpler.
 		if (opts.bootstrapComponents) {
-			AlpineComponents.bootstrap(opts, alpine);
+			AlpineComponents.bootstrap(opts, alpinejs);
 		}
 	}
 

examples/package/tsconfig.json

@@ -10,6 +10,7 @@
     "strict": true,
     "declaration": true,
     "noEmit": false,
+    "removeComments": false,
     "lib": [
       "es2017",
       "dom"

examples/project/package-lock.json

@@ -25,7 +25,7 @@
     "alpinejs": "^3.13.0"
   },
   "devDependencies": {
-    "@types/alpinejs": "^3.7.2",
+    "@types/alpinejs": "^3.13.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "cssnano": "^6.0.1",
@@ -39,7 +39,7 @@
     "tailwindcss": "^3.3.3",
     "terser-webpack-plugin": "^5.3.9",
     "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "warnings-to-errors-webpack-plugin": "^2.3.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",

examples/project/package.json

@@ -8,6 +8,8 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import WarningsToErrorsPlugin from 'warnings-to-errors-webpack-plugin';
 
+import webpack from 'webpack';
+
 const isProduction = process.env.NODE_ENV === 'production';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -19,19 +21,24 @@ const outPath = path.resolve(rootPath, 'dist');
 
 const Mode = isProduction ? 'production' : 'development';
 const productionPlugins = [
-	new WarningsToErrorsPlugin()
+	new WarningsToErrorsPlugin(),
+	new webpack.optimize.LimitChunkCountPlugin({
+		maxChunks: 1
+	})
 ];
 const developmentPlugins = [
 	//
 ];
 
 /** @type {Partial<import('webpack').Configuration>} */
 let Config = {
-	entry: './src/index.ts',
+	entry: {
+		index: './src/index.ts'
+	},
 	mode: Mode,
 	output: {
 		path: outPath,
-		filename: 'index.js',
+		filename: '[name].js',
 		clean: true,
 		strictModuleErrorHandling: true,
 		strictModuleExceptionHandling: true

examples/project/webpack.config.js

@@ -1,6 +1,12 @@
+/**
+ * Export functions and types.
+ */
 export { type KnownClassConstructor, type KnownConstructor, type AlpineComponentConstructor, type AlpineDataContext, type AlpineData, AlpineComponent } from './src/Component';
 export { type ComponentList, ComponentStore, transformToAlpineData, makeAlpineConstructor } from './src/Store';
 export * as Globals from './src/Global';
 export { AlpineComponents, componentsPlugin } from './src/Plugin';
+/**
+ * Alpine plugin as default export.
+ */
 import { componentsPlugin } from './src/Plugin';
 export default componentsPlugin;