@astrojs/alpinejs - npm Package Compare versions

Comparing version 0.0.0-experimental-assets-20230307131344 to 0.0.0-isr-20240125224234

dist/index.d.ts

 import type { AstroIntegration } from 'astro';
-export default function createPlugin(): AstroIntegration;
+interface Options {
+    /**
+     *	You can extend Alpine by setting this option to a root-relative import specifier (for example, `entrypoint: "/src/entrypoint"`).
+     *
+     * The default export of this file should be a function that accepts an Alpine instance prior to starting, allowing the use of custom directives, plugins and other customizations for advanced use cases.
+     *
+     * ```js
+     * // astro.config.mjs
+     * import { defineConfig } from 'astro/config';
+     * import alpine from '@astrojs/alpinejs';
+     *
+     * export default defineConfig({
+     *   // ...
+     *   integrations: [alpine({ entrypoint: '/src/entrypoint' })],
+     * });
+     * ```
+     *
+     * ```js
+     * // src/entrypoint.ts
+     * import type { Alpine } from 'alpinejs'
+     *
+     * export default (Alpine: Alpine) => {
+     *     Alpine.directive('foo', el => {
+     *         el.textContent = 'bar';
+     *     })
+     * }
+     * ```
+     */
+    entrypoint?: string;
+}
+export default function createPlugin(options?: Options): AstroIntegration;
+export {};

dist/index.js

@@ -1,10 +0,62 @@
-function createPlugin() {
+import { resolve } from "node:path";
+function virtualEntrypoint(options) {
+  const virtualModuleId = "virtual:@astrojs/alpinejs/entrypoint";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
+  let isBuild;
+  let root;
+  let entrypoint;
   return {
+    name: "@astrojs/alpinejs/virtual-entrypoint",
+    config(_, { command }) {
+      isBuild = command === "build";
+    },
+    configResolved(config) {
+      root = config.root;
+      if (options?.entrypoint) {
+        entrypoint = options.entrypoint.startsWith(".") ? resolve(root, options.entrypoint) : options.entrypoint;
+      }
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        if (entrypoint) {
+          return `import * as mod from ${JSON.stringify(entrypoint)};
+						
+export const setup = (Alpine) => {
+	if ('default' in mod) {
+		mod.default(Alpine);
+	} else {
+		${!isBuild ? `console.warn("[@astrojs/alpinejs] entrypoint \`" + ${JSON.stringify(
+            entrypoint
+          )} + "\` does not export a default function. Check out https://docs.astro.build/en/guides/integrations-guide/alpinejs/#entrypoint.");` : ""}
+	}
+}`;
+        }
+        return `export const setup = () => {};`;
+      }
+    }
+  };
+}
+function createPlugin(options) {
+  return {
     name: "@astrojs/alpinejs",
     hooks: {
-      "astro:config:setup": ({ injectScript }) => {
+      "astro:config:setup": ({ injectScript, updateConfig }) => {
         injectScript(
           "page",
-          `import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start();`
+          `import Alpine from 'alpinejs';
+import { setup } from 'virtual:@astrojs/alpinejs/entrypoint';
+setup(Alpine);
+window.Alpine = Alpine;
+Alpine.start();`
         );
+        updateConfig({
+          vite: {
+            plugins: [virtualEntrypoint(options)]
+          }
+        });
       }
@@ -11,0 +63,0 @@ }

package.json

 {
   "name": "@astrojs/alpinejs",
-  "description": "The official Alpine.js integration for Astro.",
-  "version": "0.0.0-experimental-assets-20230307131344",
+  "description": "Use Alpine within Astro",
+  "version": "0.0.0-isr-20240125224234",
   "type": "module",
@@ -27,2 +27,5 @@ "types": "./dist/index.d.ts",
   },
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
@@ -33,10 +36,16 @@ "@types/alpinejs": "^3.0.0",
   "devDependencies": {
-    "astro": "0.0.0-experimental-assets-20230307131344",
-    "astro-scripts": "0.0.0-experimental-assets-20230307131344"
+    "@playwright/test": "1.40.0",
+    "vite": "^5.0.10",
+    "astro": "0.0.0-isr-20240125224234",
+    "astro-scripts": "0.0.14"
   },
+  "publishConfig": {
+    "provenance": true
+  },
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",
     "build:ci": "astro-scripts build \"src/**/*.ts\"",
-    "dev": "astro-scripts dev \"src/**/*.ts\""
+    "dev": "astro-scripts dev \"src/**/*.ts\"",
+    "test:e2e": "playwright test"
   }
 }

README.md

@@ -5,103 +5,35 @@ # @astrojs/alpinejs
 
-- <strong>[Installation](#installation)</strong>
-- <strong>[Usage](#usage)</strong>
-- <strong>[Configuration](#configuration)</strong>
-- <strong>[Examples](#examples)</strong>
-- <strong>[Troubleshooting](#troubleshooting)</strong>
-- <strong>[Contributing](#contributing)</strong>
-- <strong>[Changelog](#changelog)</strong>
+## Documentation
 
-## Installation
+Read the [`@astrojs/alpinejs` docs][docs]
 
-### Quick Install
+## Support
 
-The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
 
-```sh
-# Using NPM
-npx astro add alpinejs
-# Using Yarn
-yarn astro add alpinejs
-# Using PNPM
-pnpm astro add alpinejs
-```
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
+- Submit bug reports and feature requests as [GitHub issues][issues].
 
-### Manual Install
+## Contributing
 
-First, install the `@astrojs/alpinejs` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
 
-```sh
-npm install @astrojs/alpinejs
-```
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
 
-Most package managers will install associated peer dependencies as well. However, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:
+## License
 
-```sh
-npm install alpinejs @types/alpinejs
-```
+MIT
 
-Then, apply this integration to your `astro.config.*` file using the `integrations` property:
+Copyright (c) 2023–present [Astro][astro]
 
-__`astro.config.mjs`__
-
-```js ins={2} "alpine()"
-import { defineConfig } from 'astro/config';
-import alpine from '@astrojs/alpinejs';
-
-export default defineConfig({
-  // ...
-  integrations: [alpine()],
-});
-```
-
-## Usage
-
-Once the integration is installed, you can use [Alpine.js](https://alpinejs.dev/) directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website.
-
-Check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-## Limitations
-
-The Alpine.js integration does not give you control over how the script is loaded or initialized. If you require this control, consider [installing and using Alpine.js manually](https://alpinejs.dev/essentials/installation). Astro supports all officially documented Alpine.js manual setup instructions, using `<script>` tags inside of an Astro component.
-
-**It is not currently possible to [extend Alpine.js](https://alpinejs.dev/advanced/extending) when using this component.** If you need this feature, consider following [the manual Alpine.js setup](https://alpinejs.dev/essentials/installation) instead using an Astro script tag:
-
-```astro title="src/pages/index.astro"
-<!-- Example: Load AlpineJS on a single page. -->
-<script>
-  import Alpine from 'alpinejs';
-
-  // Optional: Extend Alpine.js
-  // Alpine.directive('foo', ...)
-
-  window.Alpine = Alpine;
-  Alpine.start();
-</script>
-```
-
-## Configuration
-
-The Alpine.js integration does not support any custom configuration at this time.
-
-## Examples
-
-- The [Astro Alpine.js example](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) shows how to use Alpine.js in an Astro project.
-
-## Troubleshooting
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
-
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-## Contributing
-
-This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
-
-## Changelog
-
-See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
-
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/alpinejs/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

No alert changes

Improved metrics

Lines of code

100

increased by127.27%

Worsened metrics

Total package byte prevSize

9193

decreased by-22.17%

Dev dependency count

4

increased by100%

Number of package files

5

decreased by-44.44%

Number of lines in readme file

39

decreased by-63.55%

No dependency changes