From 8c8b823bc972759b8ff6c442c71f795e662ef1aa Mon Sep 17 00:00:00 2001 From: David Taylor Date: Wed, 27 Nov 2024 17:34:57 +0000 Subject: [PATCH] Initial implementation --- .github/workflows/push-dist.yml | 2 +- .prettierrc.cjs | 1 - CONTRIBUTING.md | 4 +- README.md | 113 +- config/ember-cli-update.json | 2 +- ember-curried-invokables/src/index.js | 0 .../.eslintignore | 0 .../.eslintrc.cjs | 0 .../.gitignore | 0 .../.prettierignore | 0 .../.prettierrc.cjs | 0 .../.template-lintrc.cjs | 0 .../addon-main.cjs | 0 .../babel.config.json | 0 .../package.json | 16 +- .../rollup.config.mjs | 0 ember-curry-component/src/index.js | 33 + package.json | 4 +- pnpm-lock.yaml | 15630 +++++++++------- pnpm-workspace.yaml | 2 +- test-app/.prettierrc.js | 12 - test-app/ember-cli-build.js | 8 +- test-app/package.json | 6 +- .../integration/curried-component-test.gjs | 166 + 24 files changed, 8991 insertions(+), 7008 deletions(-) delete mode 100644 ember-curried-invokables/src/index.js rename {ember-curried-invokables => ember-curry-component}/.eslintignore (100%) rename {ember-curried-invokables => ember-curry-component}/.eslintrc.cjs (100%) rename {ember-curried-invokables => ember-curry-component}/.gitignore (100%) rename {ember-curried-invokables => ember-curry-component}/.prettierignore (100%) rename {ember-curried-invokables => ember-curry-component}/.prettierrc.cjs (100%) rename {ember-curried-invokables => ember-curry-component}/.template-lintrc.cjs (100%) rename {ember-curried-invokables => ember-curry-component}/addon-main.cjs (100%) rename {ember-curried-invokables => ember-curry-component}/babel.config.json (100%) rename {ember-curried-invokables => ember-curry-component}/package.json (82%) rename {ember-curried-invokables => ember-curry-component}/rollup.config.mjs (100%) create mode 100644 ember-curry-component/src/index.js delete mode 100644 test-app/.prettierrc.js create mode 100644 test-app/tests/integration/curried-component-test.gjs diff --git a/.github/workflows/push-dist.yml b/.github/workflows/push-dist.yml index 048dc2f..4b146e2 100644 --- a/.github/workflows/push-dist.yml +++ b/.github/workflows/push-dist.yml @@ -32,4 +32,4 @@ jobs: with: branch: dist token: ${{ secrets.GITHUB_TOKEN }} - working-directory: 'ember-curried-invokables' + working-directory: 'ember-curry-component' diff --git a/.prettierrc.cjs b/.prettierrc.cjs index d6a5295..336098d 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -2,5 +2,4 @@ module.exports = { plugins: ['prettier-plugin-ember-template-tag'], - singleQuote: true, }; diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bcf98cd..e19ae82 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,7 +3,7 @@ ## Installation - `git clone ` -- `cd ember-curried-invokables` +- `cd ember-curry-component` - `pnpm install` ## Linting @@ -13,7 +13,7 @@ ## Building the addon -- `cd ember-curried-invokables` +- `cd ember-curry-component` - `pnpm build` ## Running tests diff --git a/README.md b/README.md index 6ee31ae..12423a1 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,116 @@ -# ember-curried-invokables +# ember-curry-component -[Short description of the addon.] - -## Compatibility - -- Ember.js v4.12 or above -- Embroider or ember-auto-import v2 +Like Ember's builtin `(component)` helper, but with dynamic arguments, and JS compatibility. ## Installation ``` -ember install ember-curried-invokables +ember install ember-curry-component ``` ## Usage -[Longer description of how to use the addon in apps.] +### Simple static arguments + +```gjs +import Component from "@glimmer/component"; +import { getOwner } from "@ember/owner"; +import { curryComponent } from "ember-curry-component"; +import SomeOtherComponent from "./some-other-component"; + +class extends MyComponent { + get curriedComponent(){ + const args = { name: "David" }; + return curryComponent(SomeOtherComponent, args, getOwner(this)) + } + + +} +``` + +### Reactive arguments (option 1: per-argument reactivity) + +```gjs +import Component from "@glimmer/component"; +import { getOwner } from "@ember/owner"; +import { curryComponent } from "ember-curry-component"; +import SomeOtherComponent from "./some-other-component"; + +class extends MyComponent { + @tracked name = "David"; + + get curriedComponent() { + const args = { get name() { return this.name } }; + return curryComponent(SomeOtherComponent, args, getOwner(this)); + } + + +} +``` +When `this.name` is reassigned, the `@name` argument on the curried component will be invalidated. The getter will not be re-evaluated. + +### Reactive arguments (option 2: rerender entire component) + +```gjs +import Component from "@glimmer/component"; +import { getOwner } from "@ember/owner"; +import { curryComponent } from "ember-curry-component"; +import SomeOtherComponent from "./some-other-component"; + +class extends MyComponent { + @tracked name = "David"; + + get curriedComponent(){ + const args = { name: this.name }; + return curryComponent(SomeOtherComponent, args, getOwner(this)) + } + + +} +``` +When `this.name` is reassigned, the getter will be invalidated, and the curried component will be completely rerendered. + +### As a helper + +In `.gjs`/`.gjs` files, the curryComponent helper can be used directly in a template. In this case, the owner does not need to be passed explicitly. + +```gjs +import SomeOtherComponent from "./some-other-component"; + +const args = { name: "david" } + +