alpinejs - npm Package Compare versions

builds/cdn.js

builds/module.js

dist/cdn.js

dist/cdn.min.js

dist/module.cjs.js

dist/module.esm.js

src/alpine.js

src/clone.js

src/datas.js

src/directives.js

src/directives/index.js

src/directives/x-bind.js

src/directives/x-cloak.js

src/directives/x-data.js

src/directives/x-effect.js

src/directives/x-for.js

src/directives/x-if.js

src/directives/x-ignore.js

src/directives/x-init.js

src/directives/x-model.js

src/directives/x-on.js

src/directives/x-ref.js

src/directives/x-show.js

src/directives/x-text.js

src/directives/x-transition.js

src/evaluator.js

src/interceptor.js

src/lifecycle.js

src/magics.js

src/magics/$dispatch.js

src/magics/$el.js

src/magics/$nextTick.js

src/magics/$refs.js

src/magics/$store.js

src/magics/$watch.js

src/magics/index.js

src/mutation.js

src/nextTick.js

src/plugin.js

src/reactivity.js

src/scheduler.js

src/scope.js

src/store.js

src/utils/bind.js

src/utils/classes.js

src/utils/dispatch.js

src/utils/on.js

src/utils/once.js

src/utils/styles.js

src/utils/walk.js

src/utils/warn.js

48

package.json

		{
		"main": "dist/alpine.js",
		"name": "alpinejs",
		"version": "2.8.2",
		"repository": {
		"type": "git",
		"url": "git://github.com/alpinejs/alpine.git"
		},
		"scripts": {
		"watch": "rollup -c -w",
		"build": "concurrently \"rollup -c\" \"npx rollup -c rollup-ie11.config.js\" \"node inject-version-readme\"",
		"test": "npx jest",
		"test:debug": "node --inspect node_modules/.bin/jest --runInBand"
		},
		"version": "3.0.0",
		"description": "The rugged, minimal JavaScript framework",
		"author": "Caleb Porzio",
		"license": "MIT",
		"devDependencies": {
		"@babel/core": "^7.12.10",
		"@babel/preset-env": "^7.12.11",
		"@rollup/plugin-commonjs": "^11.1.0",
		"@rollup/plugin-multi-entry": "^3.0.1",
		"@rollup/plugin-replace": "^2.3.4",
		"@testing-library/dom": "^6.16.0",
		"@testing-library/jest-dom": "^4.2.4",
		"@webcomponents/template": "^1.4.4",
		"babel-jest": "^25.5.1",
		"classlist-polyfill": "^1.2.0",
		"concurrently": "^5.3.0",
		"core-js": "^3.8.3",
		"element-closest": "^3.0.2",
		"element-remove": "^1.0.4",
		"events-polyfill": "^2.1.2",
		"jest": "^25.5.4",
		"jsdom-simulant": "^1.1.2",
		"observable-membrane": "^0.26.1",
		"proxy-polyfill": "^0.3.2",
		"rollup": "^1.32.1",
		"rollup-plugin-babel": "^4.4.0",
		"rollup-plugin-filesize": "^6.2.1",
		"rollup-plugin-node-resolve": "^5.2.0",
		"rollup-plugin-strip-code": "^0.2.7",
		"rollup-plugin-terser": "^7.0.2",
		"shim-selected-options": "^1.0.1"
		},
		"dependencies": {}
		"main": "dist/module.cjs.js",
		"module": "dist/module.esm.js",
		"dependencies": {
		"@vue/reactivity": "^3.0.2"
		}
		}

191

src/index.js

		@@ -1,133 +0,74 @@
		import Component from './component'
		import { domReady, isTesting } from './utils'
		/**
		* _
		* /\ \| \| (_) (_)
		* / \ \| \|_ __ _ _ __ ___ _ ___
		* / /\ \ \| \| '_ \\| \| '_ \ / _ \ \| / __\|
		* / ____ \\| \| \|_) \| \| \| \| \| __/_\| \__ \
		* /_/ \_\_\| .__/\|_\|_\| \|_\|\___(_) \|___/
		* \| \| _/ \|
		* \|_\| \|__/
		*
		* Let's build Alpine together. It's easier than you think.
		* For starters, we'll import Alpine's core. This is the
		* object that will expose all of Alpine's public API.
		*/
		import Alpine from './alpine'

		const Alpine = {
		version: process.env.PKG_VERSION,
		/**
		* _______________________________________________________
		* The Evaluator
		* -------------------------------------------------------
		*
		* Now we're ready to bootstrap Alpine's evaluation system.
		* It's the function that converts raw JavaScript string
		* expressions like @click="toggle()", into actual JS.
		*/
		import { normalEvaluator } from './evaluator'

		pauseMutationObserver: false,
		Alpine.setEvaluator(normalEvaluator)

		magicProperties: {},
		/**
		* _______________________________________________________
		* The Reactivity Engine
		* -------------------------------------------------------
		*
		* This is the reactivity core of Alpine. It's the part of
		* Alpine that triggers an element with x-text="message"
		* to update its inner text when "message" is changed.
		*/
		import { reactive, effect, stop, toRaw } from '@vue/reactivity'

		onComponentInitializeds: [],
		Alpine.setReactivityEngine({ reactive, effect, release: stop, raw: toRaw })

		onBeforeComponentInitializeds: [],
		/**
		* _______________________________________________________
		* The Magics
		* -------------------------------------------------------
		*
		* Yeah, we're calling them magics here like they're nouns.
		* These are the properties that are magically available
		* to all the Alpine expressions, within your web app.
		*/
		import './magics/index'

		ignoreFocusedForValueBinding: false,
		/**
		* _______________________________________________________
		* The Directives
		* -------------------------------------------------------
		*
		* Now that the core is all set up, we can register Alpine
		* directives like x-text or x-on that form the basis of
		* how Alpine adds behavior to an app's static markup.
		*/
		import './directives/index'

		start: async function () {
		if (! isTesting()) {
		await domReady()
		}

		this.discoverComponents(el => {
		this.initializeComponent(el)
		})

		// It's easier and more performant to just support Turbolinks than listen
		// to MutationObserver mutations at the document level.
		document.addEventListener("turbolinks:load", () => {
		this.discoverUninitializedComponents(el => {
		this.initializeComponent(el)
		})
		})

		this.listenForNewUninitializedComponentsAtRunTime()
		},

		discoverComponents: function (callback) {
		const rootEls = document.querySelectorAll('[x-data]');

		rootEls.forEach(rootEl => {
		callback(rootEl)
		})
		},

		discoverUninitializedComponents: function (callback, el = null) {
		const rootEls = (el \|\| document).querySelectorAll('[x-data]');

		Array.from(rootEls)
		.filter(el => el.__x === undefined)
		.forEach(rootEl => {
		callback(rootEl)
		})
		},

		listenForNewUninitializedComponentsAtRunTime: function () {
		const targetNode = document.querySelector('body');

		const observerOptions = {
		childList: true,
		attributes: true,
		subtree: true,
		}

		const observer = new MutationObserver((mutations) => {
		if (this.pauseMutationObserver) return;

		for (let i=0; i < mutations.length; i++){
		if (mutations[i].addedNodes.length > 0) {
		mutations[i].addedNodes.forEach(node => {
		// Discard non-element nodes (like line-breaks)
		if (node.nodeType !== 1) return

		// Discard any changes happening within an existing component.
		// They will take care of themselves.
		if (node.parentElement && node.parentElement.closest('[x-data]')) return

		this.discoverUninitializedComponents((el) => {
		this.initializeComponent(el)
		}, node.parentElement)
		})
		}
		}
		})

		observer.observe(targetNode, observerOptions)
		},

		initializeComponent: function (el) {
		if (! el.__x) {
		// Wrap in a try/catch so that we don't prevent other components
		// from initializing when one component contains an error.
		try {
		el.__x = new Component(el)
		} catch (error) {
		setTimeout(() => {
		throw error
		}, 0)
		}
		}
		},

		clone: function (component, newEl) {
		if (! newEl.__x) {
		newEl.__x = new Component(newEl, component)
		}
		},

		addMagicProperty: function (name, callback) {
		this.magicProperties[name] = callback
		},

		onComponentInitialized: function (callback) {
		this.onComponentInitializeds.push(callback)
		},

		onBeforeComponentInitialized: function (callback) {
		this.onBeforeComponentInitializeds.push(callback)
		}
		}

		if (! isTesting()) {
		window.Alpine = Alpine

		if (window.deferLoadingAlpine) {
		window.deferLoadingAlpine(function () {
		window.Alpine.start()
		})
		} else {
		window.Alpine.start()
		}
		}

		/**
		* _______________________________________________________
		* The Alpine Global
		* -------------------------------------------------------
		*
		* Now that we have set everything up internally, anything
		* Alpine-related that will need to be accessed on-going
		* will be made available through the "Alpine" global.
		*/
		export default Alpine

.editorconfig

.github/FUNDING.yml

.github/ISSUE_TEMPLATE/config.yml

.github/workflows/run-tests.yml

babel.config.js

dist/alpine-ie11.js

dist/alpine.js

examples/card-game.html

examples/index.html

examples/tags.html

inject-version-readme.js

jest.config.js

LICENSE.md

README.ar.md

README.de.md

README.es.md

README.fr.md

README.id.md

README.ja.md

README.ko.md

README.md

README.pt.md

README.ru.md

README.tr.md

README.zh-CN.md

README.zh-TW.md

rollup-ie11.config.js

rollup.config.js

src/component.js

src/directives/bind.js

src/directives/for.js

src/directives/html.js

src/directives/if.js

src/directives/model.js

src/directives/on.js

src/directives/show.js

src/directives/text.js

src/observable.js

src/polyfills.js

src/utils.js

test/bind.spec.js

test/cloak.spec.js

test/constructor.spec.js

test/custom-magic-properties.spec.js

test/data.spec.js

test/debounce.spec.js

test/dispatch.spec.js

test/el.spec.js

test/error.spec.js

test/for.spec.js

test/html.spec.js

test/if.spec.js

test/lifecycle.spec.js

test/model.spec.js

test/mutations.spec.js

test/nesting.spec.js

test/next-tick.spec.js

test/on.spec.js

test/readonly.spec.js

test/ref.spec.js

test/show.spec.js

test/spread.spec.js

test/strict-mode.spec.js

test/text.spec.js

test/transition.spec.js

test/utils.spec.js

test/version.spec.js

test/watch.spec.js

turbolinks-manual-test/index.html

turbolinks-manual-test/navigated-away/index.html

alpinejs - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes