alpine-provide-inject - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/cdn.js

		@@ -40,5 +40,2 @@ "use strict";
		});
		Alpine.magic("injectSelf", (el) => {
		return (key, defaultVal) => injectFn(el, key, defaultVal, false);
		});
		}
		@@ -45,0 +42,0 @@ var init_src = __esm({

dist/cdn.min.js

		@@ -1,1 +0,1 @@
		"use strict";(()=>{var p=(n,e)=>()=>(n&&(e=n(n=0)),e);var s=(n,e)=>()=>(e\|\|n((e={exports:{}}).exports,e),e.exports);function l(n){n.magic("provide",i=>(t,r)=>{i._provides\|\|(i._provides={}),i._provides[t]=r});let e=(i,t,r,d)=>{let o=i;for(;o;){if(o._provides&&t in o._provides)return o._provides[t];if(d)o=o.parentElement;else break}if(r!==void 0)return r;throw Error(`[alpine-provide-inject]: Tried to inject undefined key '${t.toString()}'`)};n.magic("inject",i=>(t,r)=>e(i.parentElement,t,r,!0)),n.magic("injectSelf",i=>(t,r)=>e(i,t,r,!1))}var a=p(()=>{"use strict"});var c=s(()=>{a();document.addEventListener("alpine:init",()=>{window.Alpine.plugin(l)})});c();})();
		"use strict";(()=>{var s=(n,e)=>()=>(n&&(e=n(n=0)),e);var a=(n,e)=>()=>(e\|\|n((e={exports:{}}).exports,e),e.exports);function l(n){n.magic("provide",i=>(r,t)=>{i._provides\|\|(i._provides={}),i._provides[r]=t});let e=(i,r,t,d)=>{let o=i;for(;o;){if(o._provides&&r in o._provides)return o._provides[r];if(d)o=o.parentElement;else break}if(t!==void 0)return t;throw Error(`[alpine-provide-inject]: Tried to inject undefined key '${r.toString()}'`)};n.magic("inject",i=>(r,t)=>e(i.parentElement,r,t,!0))}var p=s(()=>{"use strict"});var c=a(()=>{p();document.addEventListener("alpine:init",()=>{window.Alpine.plugin(l)})});c();})();

dist/module.cjs.js

		@@ -56,5 +56,2 @@ "use strict";
		});
		Alpine.magic("injectSelf", (el) => {
		return (key, defaultVal) => injectFn(el, key, defaultVal, false);
		});
		}
		@@ -61,0 +58,0 @@

dist/module.esm.js

		@@ -30,5 +30,2 @@ // src/index.ts
		});
		Alpine.magic("injectSelf", (el) => {
		return (key, defaultVal) => injectFn(el, key, defaultVal, false);
		});
		}
		@@ -35,0 +32,0 @@

package.json

		{
		"name": "alpine-provide-inject",
		"private": false,
		"version": "0.2.0",
		"version": "0.3.0",
		"type": "commonjs",
		"main": "dist/module.cjs.js",
		"module": "dist/module.esm.js",
		"homepage": "https://github.com/JuroOravec/alpine-provide-inject",
		"homepage": "https://github.com/JuroOravec/alpinui/blob/main/packages/alpine-provide-inject",
		"repository": {
		"type": "git",
		"url": "https://github.com/jurooravec/alpine-provide-inject.git"
		"type": "git",
		"url": "git+https://github.com/JuroOravec/alpinui.git",
		"directory": "packages/alpine-provide-inject"
		},
		@@ -16,4 +17,3 @@ "author": "Juro Oravec",
		"scripts": {
		"build": "node scripts/build.js",
		"publish": "npm publish"
		"build": "node scripts/build.js"
		},
		@@ -20,0 +20,0 @@ "devDependencies": {

README.md

		@@ -6,10 +6,22 @@ # Alpine Provide Inject
		```html
		<div x-data="{ provideValue: 'Outer Value' }" x-init="$provide('key', provideValue)">
		<div x-data="{ innerProvideValue: 'Inner Value' }" x-init="$provide('key', innerProvideValue)">
		<div
		x-data="{
		outerValue: 'Outer Value'
		}"
		x-init="$provide('key', outerValue)"
		>
		<div
		x-data="{
		innerValue: 'Inner Value'
		}"
		x-init="$provide('key', innerValue)"
		>
		<div x-data>
		<span x-text="$inject('key')"></span> <!-- This will show "Inner Value" -->
		<!-- This will show "Inner Value" -->
		<span x-text="$inject('key')"></span>
		</div>
		</div>
		<div x-data>
		<span x-text="$inject('key')"></span> <!-- This will show "Outer Value" -->
		<!-- This will show "Outer Value" -->
		<span x-text="$inject('key')"></span>
		</div>
		@@ -24,3 +36,3 @@ </div>
		```html
		<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>
		<script defer src="https://cdn.jsdelivr.net/npm/alpine-provide-inject@0.x.x/dist/cdn.min.js"></script>
		```
		@@ -33,1 +45,12 @@
		```

		Then initialize it from your bundle:

		```js
		import Alpine from 'alpinejs'
		import ProvideInject from 'alpine-provide-inject'

		Alpine.plugin(ProvideInject)

		...
		```

src/global.d.ts

		@@ -1,5 +0,5 @@
		import type { Alpine as AlpineType } from 'alpinejs'
		import type { Alpine } from 'alpinejs'

		declare global {
		const Alpine: AlpineType
		const Alpine: Alpine
		}

src/index.ts

		// Types
		import type AlpineType from 'alpinejs'
		import type { Alpine as AlpineType } from 'alpinejs'
		import type { InjectionKey } from 'vue'
		@@ -18,7 +18,6 @@
		$inject: <T = any>(key: InjectionKey<T> \| string, defaultVal?: T) => T;
		$injectSelf: <T = any>(key: InjectionKey<T> \| string, defaultVal?: T) => T;
		}
		}

		export default function AlpineProvideInjectPlugin(Alpine: typeof AlpineType) {
		export default function AlpineProvideInjectPlugin(Alpine: AlpineType) {
		Alpine.magic('provide', (el) => {
		@@ -62,8 +61,2 @@ return (key: symbol \| string \| number, value: any) => {
		})

		// This is same as Vuetify's injectSelf - The value injected
		// is searched ONLY in the current element.
		Alpine.magic('injectSelf', (el) => {
		return (key: string \| symbol, defaultVal?: any) => injectFn(el, key, defaultVal, false)
		})
		}

tsconfig.json

		@@ -23,3 +23,3 @@ {
		},
		"include": ["src"]
		"include": ["src", "dev/src/vite-env.d.ts"]
		}

dev/index.html

dev/package.json

dev/public/cdn.min.js

dev/public/vite.svg

dev/src/counter.ts

dev/src/main.ts

dev/src/vite-env.d.ts

src/counter.ts

New alerts