tsc build

.gitignore

@@ -0,0 +1 @@
+node_modules/

dist/index.d.ts

@@ -0,0 +1,26 @@
+declare type ComponentConstructor = (...args: any[]) => object;
+export declare class AlpineComponent {
+    /** Retrieve the root component DOM node. */
+    $el?: Element;
+    /** Retrieve DOM elements marked with x-ref inside the component. */
+    $refs?: {
+        [name: string]: Element;
+    };
+    /** Retrieve the native browser "Event" object within an event listener. */
+    $event?: Event;
+    /** Create a CustomEvent and dispatch it using .dispatchEvent() internally. */
+    $dispatch?: (event: string, data: object) => void;
+    /** Execute a given expression AFTER Alpine has made its reactive DOM updates. */
+    $nextTick?: (callback: () => void) => void;
+    /** Will fire a provided callback when a component property you "watched" gets changed. */
+    $watch?: (property: string, callback: (value: any) => void) => void;
+}
+export declare function registerComponents(components: {
+    [name: string]: Function;
+}): {
+    [name: string]: ComponentConstructor;
+};
+export declare function component(name: string, component?: Function): ComponentConstructor;
+export declare function convertClassToAlpineConstructor(component: any): ComponentConstructor;
+declare const _default: () => void;
+export default _default;

dist/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertClassToAlpineConstructor = exports.component = exports.registerComponents = exports.AlpineComponent = void 0;
+class AlpineComponent {
+}
+exports.AlpineComponent = AlpineComponent;
+function registerComponents(components) {
+    Object.entries(components).forEach(([name, file]) => {
+        component(name, file);
+    });
+    return window.AlpineComponents;
+}
+exports.registerComponents = registerComponents;
+function component(name, component = null) {
+    if (!component) {
+        return window.AlpineComponents[name];
+    }
+    if (component['prototype'] instanceof AlpineComponent) {
+        component = convertClassToAlpineConstructor(component);
+    }
+    // @ts-ignore
+    window.AlpineComponents[name] = component;
+}
+exports.component = component;
+function convertClassToAlpineConstructor(component) {
+    return function (...args) {
+        let instance = new component(...args);
+        // Copy methods
+        const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(instance))
+            .reduce((obj, method) => {
+            obj[method] = instance[method];
+            return obj;
+        }, {});
+        // Copy properties
+        return Object.assign(methods, instance);
+    };
+}
+exports.convertClassToAlpineConstructor = convertClassToAlpineConstructor;
+exports.default = () => {
+    window.AlpineComponents = {};
+    const deferrer = window.deferLoadingAlpine || function (callback) { callback(); };
+    window.deferLoadingAlpine = function (callback) {
+        window.Alpine.component = component;
+        deferrer(callback);
+    };
+};

package-lock.json

@@ -0,0 +1,14 @@
+{
+    "name": "@leanadmin/alpine-typescript",
+    "version": "0.1.3",
+    "lockfileVersion": 1,
+    "requires": true,
+    "dependencies": {
+        "typescript": {
+            "version": "4.2.2",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.2.tgz",
+            "integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==",
+            "dev": true
+        }
+    }
+}

package.json

@@ -1,15 +1,20 @@
 {
     "name": "@leanadmin/alpine-typescript",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "TypeScript support for Alpine.js",
-    "main": "src/index.ts",
+    "main": "dist/index.js",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/LeanAdmin/alpine-typescript.git"
     },
     "files": [
-        "src/index.ts"
+        "src/index.ts",
+        "dist/index.js",
+        "dist/index.d.ts"
     ],
+    "scripts": {
+        "prepublish": "node_modules/typescript/bin/tsc tsconfig.json"
+    },
     "keywords": [
         "alpine",
         "alpine.js",
@@ -20,5 +25,8 @@
     "bugs": {
         "url": "https://github.com/LeanAdmin/alpine-typescript/issues"
     },
-    "homepage": "https://github.com/LeanAdmin/alpine-typescript#readme"
+    "homepage": "https://github.com/LeanAdmin/alpine-typescript#readme",
+    "devDependencies": {
+        "typescript": "^4.2.2"
+    }
 }

tsconfig.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es6",
-    "lib": ["ES2017", "DOM"]
+    "lib": ["ES2017", "DOM"],
+    "declaration": true,
+    "outDir": "dist/"
   },
   "include": ["src/**/*"]
 }

workflows/publish.yaml

@@ -0,0 +1,16 @@
+name: Publish Node.js package
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - run: npm install
+    - uses: actions/setup-node@v1
+      with:
+        registry-url: 'https://npm.pkg.github.com'
+    - run: npm publish
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}