{"_id":"@ekwoka/alpine-scope","name":"@ekwoka/alpine-scope","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@ekwoka/alpine-scope","version":"0.0.1","description":"Access component scopes by name","author":{"name":"Eric Kwoka","email":"eric@thekwoka.net","url":"https://thekwoka.net/"},"license":"MIT","keywords":["AlpineJS"],"type":"module","sideEffects":false,"main":"dist/","types":"dist/","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./dist":"./dist/","./src":"./src/"},"peerDependencies":{"alpinejs":"3.x"},"prettier":{"singleQuote":true,"bracketSameLine":true},"repository":{"type":"git","url":"git+https://github.com/ekwoka/alpine-plugins.git"},"homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/scope/README.md","scripts":{"build":"vite build","coverage":"vitest run --coverage","lint":"eslint --fix ./src; prettier --write ./src --loglevel error","lint:check":"eslint --max-warnings 10 ./src && prettier --check ./src","lint:types":"tsc --noEmit","prebuild":"rm -rf dist","test":"vitest"},"bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"_id":"@ekwoka/alpine-scope@0.0.1","_integrity":"sha512-mES3ZW8pykLtreryQ+2EOMYrVFI6bGjdV9hOdoRbsBQxGmvf24hjusIQGe60qF3BrC5DTD6IrQ/K1mtKJs8Cbw==","_resolved":"/private/var/folders/9x/mjsjrd1n2r3c8vs05jtn3cnc0000gn/T/482f51420d2e0ae2595fdc9518b6f50a/ekwoka-alpine-scope-0.0.1.tgz","_from":"file:ekwoka-alpine-scope-0.0.1.tgz","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-mES3ZW8pykLtreryQ+2EOMYrVFI6bGjdV9hOdoRbsBQxGmvf24hjusIQGe60qF3BrC5DTD6IrQ/K1mtKJs8Cbw==","shasum":"ec8f96b545fcd8fcb35fe73ce1e411c0c2e2926c","tarball":"https://registry.npmjs.org/@ekwoka/alpine-scope/-/alpine-scope-0.0.1.tgz","fileCount":8,"unpackedSize":20858,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwD89as4wSv77pJwPZWiAZsMIpnxtd3LlOz2FHP8RgRAIhAIBIDN0h3erXvk/olVmEK5RugvrejDOzJE6HKGBdw5+9"}]},"_npmUser":{"name":"ekwoka","email":"ninjatheory@gmail.com"},"directories":{},"maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-scope_0.0.1_1709105741576_0.38773650278642346"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-28T07:35:41.505Z","0.0.1":"2024-02-28T07:35:41.797Z","modified":"2024-02-28T07:35:42.756Z"},"maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"description":"Access component scopes by name","homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/scope/README.md","keywords":["AlpineJS"],"repository":{"type":"git","url":"git+https://github.com/ekwoka/alpine-plugins.git"},"author":{"name":"Eric Kwoka","email":"eric@thekwoka.net","url":"https://thekwoka.net/"},"bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"license":"MIT","readme":"# Alpine Scope: Scoped Context Naming for AlpineJS\n\n[<img src=\"https://img.shields.io/npm/v/@ekwoka/alpine-scope?label=%20&style=for-the-badge&logo=pnpm&logoColor=white\">](https://www.npmjs.com/package/@ekwoka/alpine-scope)\n<img src=\"https://img.shields.io/npm/types/@ekwoka/alpine-scope?label=%20&amp;logo=typescript&amp;logoColor=white&amp;style=for-the-badge\">\n<img src=\"https://img.shields.io/npm/dt/@ekwoka/alpine-scope?style=for-the-badge&logo=npm&logoColor=white\" >\n[<img src=\"https://img.shields.io/bundlephobia/minzip/@ekwoka/alpine-scope?style=for-the-badge&logo=esbuild&logoColor=white\">](https://bundlephobia.com/package/@ekwoka/alpine-scope)\n\n> This exposes a simple magic `$scope` to allow accessing specific component scopes in the tree by name.\n\n## Install\n\n```sh\nnpm i @ekwoka/alpine-scope\n```\n\nImport to Build (Simple Version):\n\n```js\nimport Alpine from 'alpinejs';\nimport Scope from '@ekwoka/alpine-scope';\n\nAlpine.plugin(Scope);\n\nwindow.Alpine = Alpine;\nAlpine.start();\n```\n\n## Usage:\n\nWhen using Alpine, it can sometimes be difficult to access the values you want in some component trees. While often this is a case of poor design, sometimes the best design can still run into some conflicts that require awkward workarounds.\n\nWith this plugin, you can use the magic `$scope` to directly access the data context of a specific component in the tree.\n\n### Implicit Naming\n\n```html\n<div x-data=\"foo\">\n  // { value: 'hello' }\n  <div x-data=\"bar\">\n    // { value: 'world' }\n    <span x-text=\"$scope.foo.value\"></span> // 'hello'\n    <span x-text=\"value\"></span> // 'world'\n  </div>\n</div>\n```\n\nThe above is an example of implicitely scoped contexts. The expression passed to `x-data` is used as the key. This works great when the contexts are defined with `Alpine.data` and referenced by name. Obviously, this would become an issue if you your expression is like\n\n```html\n<div\n  x-data=\"{ foo: { bar: [1,2,3 ]}, doStuff() { console.log(this.foo.bar) } }\"></div>\n```\n\n### Explicit Naming\n\nConveniently included is the `x-scope` directive, which allows you to explicitly name the scope. This is useful for cases where the expression may be unknown at the point of needing the scoping, and cases where the expression is unwieldly.\n\n```html\n<div x-data=\"{ value: 'hello' }\" x-scope=\"foo\">\n  <div x-data=\"{ value: 'world' }\">\n    <span x-text=\"$scope.foo.value\"></span> // 'hello'\n    <span x-text=\"value\"></span> // 'world'\n  </div>\n</div>\n```\n\nPretty nifty!!!\n\nAnd don't worry, scopes won't leak into other trees. They are only accessible within the tree they are defined.\n\n## How it works\n\n### `x-scope=\"expression\"`\n\n`x-scope` adds a `Map` of scopes to the current elements nearest component, that contains any scopes from the parent component and then the current component. These are placed in the context under a special `Symbol` so as not to conflict with your components directly.\n\nThis adds the scope to the current context, not the specific elements subtree. This means that children of the `root` element can provide a name to the scope, and that all elements in the component will see the same list of scopes, even if they are not in the same subtree. This can be useful for some more dynamic use cases. The same component scope can be named multiple times from multiple `x-scope` directives in the component tree, and they will not remove the others.\n\nHowever, the scopes are isolated to the component and its decendents, and will not leak into the parent or other components.\n\n### `$scope.name`\n\n`$scope` is a magic property available in expressions and component methods that exposes a `Proxy` that allows access to the Parent components.\n\nWhen a key is access, like `$scope.foo`, the `Proxy` first looks in the current contexts `Map` of scopes (from `x-scope`) for a context. If no context is found, it will look up the tree for an element with a matching `x-data` expression to use its context.\n\nThis means that explicitely named scopes will always take precedence over implicitely named scopes, and that scopes will not leak to sibling or parent trees.\n\n## Author\n\n👤 **Eric Kwoka**\n\n- Website: http://thekwoka.net\n- Github: [@ekwoka](https://github.com/ekwoka)\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n","readmeFilename":"README.md"}