From ba6de895bcac60c9cdd0a27b815a73daf82fd8a8 Mon Sep 17 00:00:00 2001 From: splincode Date: Thu, 26 Oct 2023 20:55:18 +0300 Subject: [PATCH] ci: update --- .github/workflows/auto-add-to-project.yml | 16 +- .github/workflows/auto-approve.yml | 72 ++--- .github/workflows/auto-author-assign.yml | 24 +- .github/workflows/auto-cleanup-caches.yml | 38 +-- .github/workflows/auto-dependency-review.yml | 14 +- .github/workflows/auto-label.yml | 20 +- .github/workflows/auto-remove-label.yml | 14 +- .github/workflows/ci.yml | 38 +-- .github/workflows/release.yml | 108 +++---- .prettierignore | 7 - CODE_OF_CONDUCT.md | 81 +++--- CONTRIBUTING.md | 16 +- README.md | 37 +-- nx.json | 6 +- package-lock.json | 265 ++++++++++++++++++ package.json | 92 +++--- prettier.config.js | 3 - projects/demo/angular.json | 5 +- projects/demo/project.json | 5 +- projects/demo/src/app/app.component.html | 83 ++++-- .../modules/comboBox/comboBox.template.html | 8 +- .../comboBoxDemo/comboBoxDemo.template.html | 28 +- .../src/app/modules/input/input.template.html | 12 +- .../modules/inputDemo/inputDemo.template.html | 10 +- .../src/app/modules/menu/menu.template.html | 9 +- .../modules/menuDemo/menuDemo.template.html | 12 +- .../app/modules/starWars/starWars.style.less | 8 +- .../modules/starWars/starWars.template.html | 31 +- .../starWarsDemo/starWarsDemo.template.html | 5 +- .../src/app/modules/tab/tab.template.html | 14 +- .../src/app/modules/tabs/tabs.template.html | 2 +- .../modules/tabsDemo/tabsDemo.template.html | 49 ++-- projects/demo/src/styles.css | 5 +- projects/ng-polymorpheus/CHANGELOG.md | 91 +++--- projects/ng-polymorpheus/README.md | 22 +- projects/ng-polymorpheus/package.json | 19 +- .../ng-polymorpheus/src/classes/component.ts | 5 +- .../ng-polymorpheus/src/tests/outlet.spec.ts | 26 +- 38 files changed, 839 insertions(+), 461 deletions(-) delete mode 100644 .prettierignore delete mode 100644 prettier.config.js diff --git a/.github/workflows/auto-add-to-project.yml b/.github/workflows/auto-add-to-project.yml index d79968fa..e1871771 100644 --- a/.github/workflows/auto-add-to-project.yml +++ b/.github/workflows/auto-add-to-project.yml @@ -1,12 +1,12 @@ name: 🤖 Auto move new issues into Triage on: - issues: - types: [opened] + issues: + types: [opened] jobs: - automate-project-columns: - runs-on: ubuntu-latest - steps: - - uses: taiga-family/ci/actions/setup/project@v1.36.1 - with: - token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} + automate-project-columns: + runs-on: ubuntu-latest + steps: + - uses: taiga-family/ci/actions/setup/project@v1.36.1 + with: + token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} diff --git a/.github/workflows/auto-approve.yml b/.github/workflows/auto-approve.yml index debf9f09..d35da429 100644 --- a/.github/workflows/auto-approve.yml +++ b/.github/workflows/auto-approve.yml @@ -2,45 +2,45 @@ name: 🤖 Auto approve validation on: pull_request env: - JOBS_NAME: '[ "ci" ]' + JOBS_NAME: '[ "ci" ]' jobs: - setup: - runs-on: ubuntu-latest - outputs: - matrix: ${{ steps.matrix.outputs.value }} - steps: - - uses: taiga-family/ci/actions/setup/checkout@v1.36.1 - - uses: taiga-family/ci/actions/setup/variables@v1.36.1 - - id: matrix - if: env.IS_TAIGA_FAMILY_BOT_PR_AUTHOR == 'true' - run: echo "value=$JOBS_NAME" >> $GITHUB_OUTPUT + setup: + runs-on: ubuntu-latest + outputs: + matrix: ${{ steps.matrix.outputs.value }} + steps: + - uses: taiga-family/ci/actions/setup/checkout@v1.36.1 + - uses: taiga-family/ci/actions/setup/variables@v1.36.1 + - id: matrix + if: env.IS_TAIGA_FAMILY_BOT_PR_AUTHOR == 'true' + run: echo "value=$JOBS_NAME" >> $GITHUB_OUTPUT - wait: - needs: [setup] - runs-on: ubuntu-latest - strategy: - fail-fast: true - matrix: - value: ${{ fromJSON(needs.setup.outputs.matrix) }} - steps: - - uses: taiga-family/ci/actions/run/wait-job@v1.36.1 - with: - token: ${{ secrets.GITHUB_TOKEN }} - job: ${{ matrix.value }} + wait: + needs: [setup] + runs-on: ubuntu-latest + strategy: + fail-fast: true + matrix: + value: ${{ fromJSON(needs.setup.outputs.matrix) }} + steps: + - uses: taiga-family/ci/actions/run/wait-job@v1.36.1 + with: + token: ${{ secrets.GITHUB_TOKEN }} + job: ${{ matrix.value }} - approve: - needs: [wait] - runs-on: ubuntu-latest - steps: - - uses: taiga-family/ci/actions/auto/approve/double@v1.36.1 - with: - token1: ${{ secrets.GITHUB_TOKEN }} - token2: ${{ secrets.TAIGA_FAMILY_APPROVE_BOT_PAT }} - - uses: taiga-family/ci/actions/run/merge@v1.36.1 - with: - token: ${{ secrets.TAIGA_FAMILY_APPROVE_BOT_PAT }} + approve: + needs: [wait] + runs-on: ubuntu-latest + steps: + - uses: taiga-family/ci/actions/auto/approve/double@v1.36.1 + with: + token1: ${{ secrets.GITHUB_TOKEN }} + token2: ${{ secrets.TAIGA_FAMILY_APPROVE_BOT_PAT }} + - uses: taiga-family/ci/actions/run/merge@v1.36.1 + with: + token: ${{ secrets.TAIGA_FAMILY_APPROVE_BOT_PAT }} concurrency: - group: auto-approve-${{ github.head_ref }} - cancel-in-progress: true + group: auto-approve-${{ github.head_ref }} + cancel-in-progress: true diff --git a/.github/workflows/auto-author-assign.yml b/.github/workflows/auto-author-assign.yml index edbfdb71..27479624 100644 --- a/.github/workflows/auto-author-assign.yml +++ b/.github/workflows/auto-author-assign.yml @@ -1,16 +1,16 @@ name: 🤖 Auto assign on: - pull_request: - types: [opened, reopened] + pull_request: + types: [opened, reopened] jobs: - assign-author: - name: PR author as an assignee - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4.1.1 - - uses: taiga-family/ci/actions/setup/variables@v1.36.1 - - uses: toshimaru/auto-author-assign@v2.0.1 - if: env.IS_OWNER_MODE == 'true' - with: - repo-token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} + assign-author: + name: PR author as an assignee + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4.1.1 + - uses: taiga-family/ci/actions/setup/variables@v1.36.1 + - uses: toshimaru/auto-author-assign@v2.0.1 + if: env.IS_OWNER_MODE == 'true' + with: + repo-token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} diff --git a/.github/workflows/auto-cleanup-caches.yml b/.github/workflows/auto-cleanup-caches.yml index 7a890f7c..c3105429 100644 --- a/.github/workflows/auto-cleanup-caches.yml +++ b/.github/workflows/auto-cleanup-caches.yml @@ -1,23 +1,23 @@ name: 🤖 Auto cleanup caches on: - push: - branches: [main, 'v[0-9]+.x'] - pull_request: - types: - - closed + push: + branches: [main, 'v[0-9]+.x'] + pull_request: + types: + - closed jobs: - cleanup: - runs-on: ubuntu-latest - env: - GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - steps: - - uses: actions/checkout@v4.1.1 - - uses: taiga-family/ci/actions/auto/cleanup-cache@v1.36.1 - if: github.event_name == 'push' - with: - branch-name: ${{ github.head_ref || github.ref_name }} - - uses: taiga-family/ci/actions/auto/cleanup-cache@v1.36.1 - if: github.event_name == 'pull_request' - with: - branch-name: refs/pull/${{ github.event.pull_request.number }}/merge + cleanup: + runs-on: ubuntu-latest + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + steps: + - uses: actions/checkout@v4.1.1 + - uses: taiga-family/ci/actions/auto/cleanup-cache@v1.36.1 + if: github.event_name == 'push' + with: + branch-name: ${{ github.head_ref || github.ref_name }} + - uses: taiga-family/ci/actions/auto/cleanup-cache@v1.36.1 + if: github.event_name == 'pull_request' + with: + branch-name: refs/pull/${{ github.event.pull_request.number }}/merge diff --git a/.github/workflows/auto-dependency-review.yml b/.github/workflows/auto-dependency-review.yml index ca1f42d3..5b9841d7 100644 --- a/.github/workflows/auto-dependency-review.yml +++ b/.github/workflows/auto-dependency-review.yml @@ -1,12 +1,12 @@ name: 🤖 Auto dependency review on: - pull_request: + pull_request: permissions: - contents: read + contents: read jobs: - dependency-review: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4.1.1 - - uses: taiga-family/ci/actions/security/dependency-review@v1.36.1 + dependency-review: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4.1.1 + - uses: taiga-family/ci/actions/security/dependency-review@v1.36.1 diff --git a/.github/workflows/auto-label.yml b/.github/workflows/auto-label.yml index 1d21cf46..f832fa0d 100644 --- a/.github/workflows/auto-label.yml +++ b/.github/workflows/auto-label.yml @@ -2,13 +2,13 @@ name: 🤖 Auto label on: pull_request_review jobs: - label-when-approved: - name: Label when approved - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4.1.1 - - uses: taiga-family/ci/actions/setup/variables@v1.36.1 - - uses: taiga-family/ci/actions/auto/label-when-approved@v1.36.1 - with: - approvals: 1 - token: ${{ secrets.GITHUB_TOKEN }} + label-when-approved: + name: Label when approved + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4.1.1 + - uses: taiga-family/ci/actions/setup/variables@v1.36.1 + - uses: taiga-family/ci/actions/auto/label-when-approved@v1.36.1 + with: + approvals: 1 + token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/auto-remove-label.yml b/.github/workflows/auto-remove-label.yml index 446dd16f..a4468a81 100644 --- a/.github/workflows/auto-remove-label.yml +++ b/.github/workflows/auto-remove-label.yml @@ -1,11 +1,11 @@ name: 🤖 Auto remove label on closed issue on: - issues: - types: [closed] + issues: + types: [closed] jobs: - remove_label: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4.1.1 - - uses: taiga-family/ci/actions/auto/remove-label@v1.36.1 + remove_label: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4.1.1 + - uses: taiga-family/ci/actions/auto/remove-label@v1.36.1 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2a7ee583..5dfa0017 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,25 +1,25 @@ name: CI on: - pull_request: - push: - branches: [main] + pull_request: + push: + branches: [main] jobs: - ci: - runs-on: ubuntu-latest - steps: - - uses: taiga-family/ci/actions/setup/checkout@v1.36.1 - - uses: taiga-family/ci/actions/setup/node@v1.36.1 - - run: npm run prettier -- --check - - run: npm run lint - - run: npm run build - env: - NODE_OPTIONS: --openssl-legacy-provider - - run: npm run test - env: - NODE_OPTIONS: --openssl-legacy-provider - - uses: codecov/codecov-action@v3 + ci: + runs-on: ubuntu-latest + steps: + - uses: taiga-family/ci/actions/setup/checkout@v1.36.1 + - uses: taiga-family/ci/actions/setup/node@v1.36.1 + - run: npm run prettier -- --check + - run: npm run lint + - run: npm run build + env: + NODE_OPTIONS: --openssl-legacy-provider + - run: npm run test + env: + NODE_OPTIONS: --openssl-legacy-provider + - uses: codecov/codecov-action@v3 concurrency: - group: ci-${{ github.head_ref }} - cancel-in-progress: true + group: ci-${{ github.head_ref }} + cancel-in-progress: true diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index e1d750f7..2e3a8ff0 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,65 +1,65 @@ name: ⚠️ Release on: - workflow_dispatch: - inputs: - forcePush: - type: boolean - required: false - description: --force-publish package - mode: - type: choice - description: force package to be versioned (depend --force-publish) - required: false - default: minor - options: - - patch - - minor - - major + workflow_dispatch: + inputs: + forcePush: + type: boolean + required: false + description: --force-publish package + mode: + type: choice + description: force package to be versioned (depend --force-publish) + required: false + default: minor + options: + - patch + - minor + - major jobs: - run-release: - name: Run release - runs-on: ubuntu-latest - env: - GH_TOKEN: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} - steps: - - uses: taiga-family/ci/actions/setup/checkout@v1.36.1 - with: - token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} - - uses: taiga-family/ci/actions/setup/node@v1.36.1 - - uses: taiga-family/ci/actions/setup/config/git@v1.36.1 - with: - token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} - - uses: taiga-family/ci/actions/setup/config/npm@v1.36.1 - with: - token: ${{ secrets.TINKOFF_SCOPE_NPM_TOKEN }} + run-release: + name: Run release + runs-on: ubuntu-latest + env: + GH_TOKEN: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} + steps: + - uses: taiga-family/ci/actions/setup/checkout@v1.36.1 + with: + token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} + - uses: taiga-family/ci/actions/setup/node@v1.36.1 + - uses: taiga-family/ci/actions/setup/config/git@v1.36.1 + with: + token: ${{ secrets.TAIGA_FAMILY_BOT_PAT }} + - uses: taiga-family/ci/actions/setup/config/npm@v1.36.1 + with: + token: ${{ secrets.TINKOFF_SCOPE_NPM_TOKEN }} - - name: Lerna update version of packages - if: always() - run: | - if [[ ${{ github.event.inputs.forcePush }} == "true" ]]; then - npx lerna version ${{ github.event.inputs.mode }} --no-private --force-publish - else - npx lerna version --no-private - fi + - name: Lerna update version of packages + if: always() + run: | + if [[ ${{ github.event.inputs.forcePush }} == "true" ]]; then + npx lerna version ${{ github.event.inputs.mode }} --no-private --force-publish + else + npx lerna version --no-private + fi - - run: npx nx build ng-polymorpheus + - run: npx nx build ng-polymorpheus - - run: npx nx publish ng-polymorpheus - if: always() + - run: npx nx publish ng-polymorpheus + if: always() - - id: info - run: | - echo "version=@tinkoff/ng-polymorpheus@$(node -p "require('./projects/ng-polymorpheus/package.json').version")" >> $GITHUB_OUTPUT + - id: info + run: | + echo "version=@tinkoff/ng-polymorpheus@$(node -p "require('./projects/ng-polymorpheus/package.json').version")" >> $GITHUB_OUTPUT - - name: Announce to Telegram - uses: taiga-family/ci/actions/messenger/telegram/announce@v1.36.1 - with: - chatId: ${{ secrets.TAIGA_TELEGRAM_CHAT_ID }} - topicId: ${{ secrets.TAIGA_TELEGRAM_CHAT_THREAD_ID }} - token: ${{ secrets.TAIGA_TELEGRAM_BOT_TOKEN }} - version: ${{ steps.info.outputs.version }} + - name: Announce to Telegram + uses: taiga-family/ci/actions/messenger/telegram/announce@v1.36.1 + with: + chatId: ${{ secrets.TAIGA_TELEGRAM_CHAT_ID }} + topicId: ${{ secrets.TAIGA_TELEGRAM_CHAT_THREAD_ID }} + token: ${{ secrets.TAIGA_TELEGRAM_BOT_TOKEN }} + version: ${{ steps.info.outputs.version }} concurrency: - group: release-${{ github.workflow }}-${{ github.ref }} - cancel-in-progress: true + group: release-${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index da3b065c..00000000 --- a/.prettierignore +++ /dev/null @@ -1,7 +0,0 @@ -.angular -dist -**/coverage/** -**/node_modules/** -**/schematics/*/files/**/* -package-lock.json -*.svg diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index c147935f..77cf3011 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -2,75 +2,60 @@ ## Our Pledge -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making +participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, +disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, +socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards -Examples of behavior that contributes to creating a positive environment -include: +Examples of behavior that contributes to creating a positive environment include: -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -- The use of sexualized language or imagery and unwelcome sexual attention or - advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic - address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take +appropriate and fair corrective action in response to any instances of unacceptable behavior. -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, +issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any +contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope -This Code of Conduct applies both within project spaces and in public spaces -when an individual is representing the project or its community. Examples of -representing a project or community include using an official project e-mail -address, posting via an official social media account, or acting as an appointed -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the +project or its community. Examples of representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed representative at an online or offline +event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at opensource@tinkoff.ru. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at +opensource@tinkoff.ru. All complaints will be reviewed and investigated and will result in a response that is deemed +necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to +the reporter of an incident. Further details of specific enforcement policies may be posted separately. -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent +repercussions as determined by other members of the project's leadership. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at +https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org -For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq +For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e8401714..a24ec90e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,16 +2,16 @@ > Thank you for considering contributing to our project. Your help if very welcome! -When contributing, it's better to first discuss the change you wish to make via issue, -email, or any other method with the owners of this repository before making a change. +When contributing, it's better to first discuss the change you wish to make via issue, email, or any other method with +the owners of this repository before making a change. -All members of our community are expected to follow our [Code of Conduct](CODE_OF_CONDUCT.md). -Please make sure you are welcoming and friendly in all of our spaces. +All members of our community are expected to follow our [Code of Conduct](CODE_OF_CONDUCT.md). Please make sure you are +welcoming and friendly in all of our spaces. ## Getting started -In order to make your contribution please make a fork of the repository. After you've pulled -the code, follow these steps to kick start the development: +In order to make your contribution please make a fork of the repository. After you've pulled the code, follow these +steps to kick start the development: 1. Run `npm ci` to install dependencies 2. Run `npm start` to launch demo project where you could test your changes @@ -25,8 +25,8 @@ npm run test ## Pull Request Process -1. We follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) - in our commit messages, i.e. `feat(core): improve typing` +1. We follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) in our commit messages, i.e. + `feat(core): improve typing` 2. Update [README.md](README.md) to reflect changes related to public API and everything relevant 3. Make sure you cover all code changes with unit tests 4. When you are ready, create Pull Request of your fork into original repository diff --git a/README.md b/README.md index 968cc9bd..ea5896eb 100644 --- a/README.md +++ b/README.md @@ -16,30 +16,29 @@ It is 1 KB gzip, dependency free and allows you to make pretty cool things. It abstracts over different ways of view customization in Angular with one simple _structural directive_: ```html - - {{text}} - +{{text}} ``` **Content** accepts: -- primitives like `number` or `string` -- functions that take `context` as argument and return a primitive -- templates that get instantiated with given `context` -- components that would get `context` injected through DI +- primitives like `number` or `string` +- functions that take `context` as argument and return a primitive +- templates that get instantiated with given `context` +- components that would get `context` injected through DI **Context** is optional when you need your **content** to adapt to the situation ## How to use it? -Typical use case would be a component that accepts visual customization and defines -context by itself. Say a menu list where you can configure how each item should look -like by passing a template. And context would be item itself and, for example, -whether it is focused or not. +Typical use case would be a component that accepts visual customization and defines context by itself. Say a menu list +where you can configure how each item should look like by passing a template. And context would be item itself and, for +example, whether it is focused or not. -Please see [extensive demo](https://stackblitz.com/edit/polymorpheus-demo) (wait for packages to install and run `npm start`). +Please see [extensive demo](https://stackblitz.com/edit/polymorpheus-demo) (wait for packages to install and run +`npm start`). -You can also [read about this concept in detail](https://medium.com/angular-in-depth/agnostic-components-in-angular-2427923b742d). +You can also +[read about this concept in detail](https://medium.com/angular-in-depth/agnostic-components-in-angular-2427923b742d). ### Accessing context in dynamic component @@ -68,8 +67,12 @@ readonly context!: { $implicit: number }; ``` ```html - - {{ item.toFixed(2) }} <-- type 'number' + + {{ item.toFixed(2) }} <-- type 'number' ``` @@ -144,5 +147,5 @@ readonly context!: { $implicit: number }; -**ng-polymorpheus** is a part of [Taiga UI](https://github.com/taiga-family/taiga-ui) libraries family which is backed and used by a -large enterprise. This means you can rely on timely support and continuous development. +**ng-polymorpheus** is a part of [Taiga UI](https://github.com/taiga-family/taiga-ui) libraries family which is backed +and used by a large enterprise. This means you can rely on timely support and continuous development. diff --git a/nx.json b/nx.json index 8bedce65..f1a771f9 100644 --- a/nx.json +++ b/nx.json @@ -20,11 +20,7 @@ "$schema": "./node_modules/nx/schemas/nx-schema.json", "namedInputs": { "default": ["{projectRoot}/**/*", "sharedGlobals"], - "sharedGlobals": [ - "{workspaceRoot}/nx.json", - "{workspaceRoot}/tsconfig.*.json", - "{workspaceRoot}/tsconfig.json" - ] + "sharedGlobals": ["{workspaceRoot}/nx.json", "{workspaceRoot}/tsconfig.*.json", "{workspaceRoot}/tsconfig.json"] }, "targetDefaults": { "build": { diff --git a/package-lock.json b/package-lock.json index c76ff634..09483f68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "@nx/node": "16.10.0", "@nx/workspace": "16.10.0", "@taiga-ui/browserslist-config": "0.3.0", + "@taiga-ui/prettier-config": "0.4.0", "@tinkoff/linters": "0.6.0", "@types/babel__traverse": "7.0.6", "@types/dompurify": "2.4.0", @@ -7587,6 +7588,18 @@ "node": ">=14" } }, + "node_modules/@prettier/plugin-xml": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@prettier/plugin-xml/-/plugin-xml-3.2.1.tgz", + "integrity": "sha512-DvwnQPf8FsczapBVDm54IhR+Pryt3DbPZSNtUb9gOuFtgoUUPbPN69f3nQBMF5BEqh4ZjZjTaHBmsVno3UnAXQ==", + "dev": true, + "dependencies": { + "@xml-tools/parser": "^1.0.11" + }, + "peerDependencies": { + "prettier": "^3.0.0" + } + }, "node_modules/@rollup/plugin-commonjs": { "version": "20.0.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-20.0.0.tgz", @@ -7790,6 +7803,21 @@ "integrity": "sha512-efMPOmYdBevp0NVXk5XRIcsUESAa2HxaBwACLGuLc0BEOYN/v48ACKf8WP8yC/0F66qIlbtWiPhPWS+KOVNmKg==", "dev": true }, + "node_modules/@taiga-ui/prettier-config": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@taiga-ui/prettier-config/-/prettier-config-0.4.0.tgz", + "integrity": "sha512-7FjEkdxrHhRFvli3VB8v2GE37E/Bodt6dbXveMw+CUf23wfzWkPm0s7aZM1gEoD3pR/ZyjjfLfjNKEpdfRVxGw==", + "dev": true, + "dependencies": { + "@prettier/plugin-xml": "3.2.1", + "prettier-package-json": "2.8.0", + "prettier-plugin-organize-attributes": "1.0.0", + "sort-package-json": "2.6.0" + }, + "peerDependencies": { + "prettier": "*" + } + }, "node_modules/@tinkoff/linters": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/@tinkoff/linters/-/linters-0.6.0.tgz", @@ -8241,6 +8269,12 @@ "integrity": "sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A==", "dev": true }, + "node_modules/@types/parse-author": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-author/-/parse-author-2.0.2.tgz", + "integrity": "sha512-erPq9bzt/xzhfDBzSctZFDCbLmU5CEAUOWy/vfwkv9N9RVNcG7UIrTwA7llH+u2LKfuVO5WwQ8kfBIgxmz5wrg==", + "dev": true + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -8608,6 +8642,15 @@ "node": ">=8" } }, + "node_modules/@xml-tools/parser": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@xml-tools/parser/-/parser-1.0.11.tgz", + "integrity": "sha512-aKqQ077XnR+oQtHJlrAflaZaL7qZsulWc/i/ZEooar5JiWj1eLt0+Wg28cpa+XLney107wXqneC+oG1IZvxkTA==", + "dev": true, + "dependencies": { + "chevrotain": "7.1.1" + } + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -9156,6 +9199,15 @@ "node": ">= 4.5.0" } }, + "node_modules/author-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/author-regex/-/author-regex-1.0.0.tgz", + "integrity": "sha512-KbWgR8wOYRAPekEmMXrYYdc7BRyhn2Ftk7KWfMUnQ43hFdojWEFRxhhRUm3/OFEdPa1r0KAvTTg9YQK57xTe0g==", + "dev": true, + "engines": { + "node": ">=0.8" + } + }, "node_modules/autoprefixer": { "version": "9.8.8", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz", @@ -10495,6 +10547,15 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "node_modules/chevrotain": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-7.1.1.tgz", + "integrity": "sha512-wy3mC1x4ye+O+QkEinVJkPf5u2vsrDIYW9G7ZuwFl6v/Yu0LwUuT2POsb+NUWApebyxfkQq6+yDfRExbnI5rcw==", + "dev": true, + "dependencies": { + "regexp-to-ast": "0.5.0" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -14996,6 +15057,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/get-stdin": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz", + "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/get-stream": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz", @@ -15026,6 +15099,15 @@ "assert-plus": "^1.0.0" } }, + "node_modules/git-hooks-list": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/git-hooks-list/-/git-hooks-list-3.1.0.tgz", + "integrity": "sha512-LF8VeHeR7v+wAbXqfgRlTSX/1BJR9Q1vEMR8JAz1cEg6GX07+zyj3sAdDvYjj/xnlIfVuGgj4qBei1K3hKH+PA==", + "dev": true, + "funding": { + "url": "https://github.com/fisker/git-hooks-list?sponsor=1" + } + }, "node_modules/git-raw-commits": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz", @@ -24421,6 +24503,18 @@ "node": ">=6" } }, + "node_modules/parse-author": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parse-author/-/parse-author-2.0.0.tgz", + "integrity": "sha512-yx5DfvkN8JsHL2xk2Os9oTia467qnvRgey4ahSm2X8epehBLx/gWLcy5KI+Y36ful5DzGbCS6RazqZGgy1gHNw==", + "dev": true, + "dependencies": { + "author-regex": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/parse-entities": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz", @@ -27018,6 +27112,61 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-package-json": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/prettier-package-json/-/prettier-package-json-2.8.0.tgz", + "integrity": "sha512-WxtodH/wWavfw3MR7yK/GrS4pASEQ+iSTkdtSxPJWvqzG55ir5nvbLt9rw5AOiEcqqPCRM92WCtR1rk3TG3JSQ==", + "dev": true, + "dependencies": { + "@types/parse-author": "^2.0.0", + "commander": "^4.0.1", + "cosmiconfig": "^7.0.0", + "fs-extra": "^10.0.0", + "glob": "^7.1.6", + "minimatch": "^3.0.4", + "parse-author": "^2.0.0", + "sort-object-keys": "^1.1.3", + "sort-order": "^1.0.1" + }, + "bin": { + "prettier-package-json": "bin/prettier-package-json" + } + }, + "node_modules/prettier-package-json/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/prettier-package-json/node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/prettier-plugin-organize-attributes": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-organize-attributes/-/prettier-plugin-organize-attributes-1.0.0.tgz", + "integrity": "sha512-+NmameaLxbCcylEXsKPmawtzla5EE6ECqvGkpfQz4KM847fXDifB1gFnPQEpoADAq6IXg+cMI8Z0ISJEXa6fhg==", + "dev": true, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "prettier": "^3.0.0" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -27804,6 +27953,12 @@ "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==", "dev": true }, + "node_modules/regexp-to-ast": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz", + "integrity": "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==", + "dev": true + }, "node_modules/regexp.prototype.flags": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", @@ -29723,6 +29878,116 @@ "node": ">=0.10.0" } }, + "node_modules/sort-object-keys": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sort-object-keys/-/sort-object-keys-1.1.3.tgz", + "integrity": "sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==", + "dev": true + }, + "node_modules/sort-order": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sort-order/-/sort-order-1.0.1.tgz", + "integrity": "sha512-BiExT7C1IVF4DNd5dttR/dEq3wunGOHpy4phvqFUQA1pY6j2ye8WWEAV8LhRbfdF0EWDX12FfyPPf9P71eT+cA==", + "dev": true + }, + "node_modules/sort-package-json": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/sort-package-json/-/sort-package-json-2.6.0.tgz", + "integrity": "sha512-XSQ+lY9bAYA8ZsoChcEoPlgcSMaheziEp1beox1JVxy1SV4F2jSq9+h2rJ+3mC/Dhu9Ius1DLnInD5AWcsDXZw==", + "dev": true, + "dependencies": { + "detect-indent": "^7.0.1", + "detect-newline": "^4.0.0", + "get-stdin": "^9.0.0", + "git-hooks-list": "^3.0.0", + "globby": "^13.1.2", + "is-plain-obj": "^4.1.0", + "sort-object-keys": "^1.1.3" + }, + "bin": { + "sort-package-json": "cli.js" + } + }, + "node_modules/sort-package-json/node_modules/detect-indent": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-7.0.1.tgz", + "integrity": "sha512-Mc7QhQ8s+cLrnUfU/Ji94vG/r8M26m8f++vyres4ZoojaRDpZ1eSIh/EpzLNwlWuvzSZ3UbDFspjFvTDXe6e/g==", + "dev": true, + "engines": { + "node": ">=12.20" + } + }, + "node_modules/sort-package-json/node_modules/detect-newline": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-4.0.1.tgz", + "integrity": "sha512-qE3Veg1YXzGHQhlA6jzebZN2qVf6NX+A7m7qlhCGG30dJixrAQhYOsJjsnBjJkCSmuOPpCk30145fr8FV0bzog==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/sort-package-json/node_modules/fast-glob": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", + "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/sort-package-json/node_modules/globby": { + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz", + "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==", + "dev": true, + "dependencies": { + "dir-glob": "^3.0.1", + "fast-glob": "^3.3.0", + "ignore": "^5.2.4", + "merge2": "^1.4.1", + "slash": "^4.0.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/sort-package-json/node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/sort-package-json/node_modules/slash": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", + "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", diff --git a/package.json b/package.json index dc351fa8..51bcc664 100644 --- a/package.json +++ b/package.json @@ -2,18 +2,6 @@ "name": "@tinkoff/ng-polymorpheus", "version": "4.1.0", "private": true, - "scripts": { - "postinstall": "ngcc --async", - "start": "nx serve demo", - "dev:ssr": "nx run demo:serve-ssr", - "build:ssr": "nx build --prod && nx run demo:server:production", - "prerender": "nx run demo:prerender", - "build": "nx build demo", - "prettier": "prettier '**/*.{svg,yml,js,ts,html,md,less,json}'", - "test": "nx test ng-polymorpheus", - "lint": "nx lint demo", - "typecheck": "tsc --noEmit --skipLibCheck" - }, "description": "This is a small library for customizing components appearance", "keywords": [ "angular", @@ -23,23 +11,50 @@ "component", "function", "context", - "context", "ng-template", "TemplateRef", "ngTemplateOutlet", "ngComponentOutlet" ], + "homepage": "https://github.com/taiga-family/ng-polymorpheus#README", + "bugs": "https://github.com/taiga-family/ng-polymorpheus/issues", + "repository": "https://github.com/taiga-family/ng-polymorpheus", "license": "Apache-2.0", "author": { "name": "Alex Inkin", "email": "alexander@inkin.ru" }, - "contributors": ["Roman Sedov <79601794011@ya.ru> (http://marsibarsi.me/)"], - "repository": "https://github.com/taiga-family/ng-polymorpheus", - "bugs": "https://github.com/taiga-family/ng-polymorpheus/issues", - "homepage": "https://github.com/taiga-family/ng-polymorpheus#README", - "schematics": "./schematics/collection.json", - "browserslist": ["extends @taiga-ui/browserslist-config"], + "contributors": [ + "Roman Sedov <79601794011@ya.ru> (http://marsibarsi.me/)" + ], + "scripts": { + "postinstall": "ngcc --async", + "start": "nx serve demo", + "dev:ssr": "nx run demo:serve-ssr", + "build:ssr": "nx build --prod && nx run demo:server:production", + "prerender": "nx run demo:prerender", + "build": "nx build demo", + "prettier": "prettier !package-lock.json . --ignore-path .gitignore", + "test": "nx test ng-polymorpheus", + "lint": "nx lint demo", + "typecheck": "tsc --noEmit --skipLibCheck" + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged && npm run typecheck" + } + }, + "lint-staged": { + "*.{js,ts,html,md,less,json}": [ + "prettier --write", + "git add" + ], + "*.ts": "tslint" + }, + "browserslist": [ + "extends @taiga-ui/browserslist-config" + ], + "prettier": "@taiga-ui/prettier-config", "dependencies": { "@angular/animations": "12.2.17", "@angular/common": "12.2.17", @@ -50,9 +65,9 @@ "@angular/platform-browser-dynamic": "12.2.17", "@angular/platform-server": "12.2.17", "@angular/router": "12.2.17", - "@nguniversal/express-engine": "12.1.3", "@ng-web-apis/common": "1.13.0", "@ng-web-apis/universal": "1.13.0", + "@nguniversal/express-engine": "12.1.3", "@tinkoff/ng-dompurify": "3.0.0", "core-js": "2.6.12", "dompurify": "3.0.6", @@ -70,11 +85,17 @@ "@angular/compiler-cli": "12.2.17", "@angular/language-service": "12.2.17", "@commitlint/cli": "18.2.0", - "terser-webpack-plugin": "5.3.9", "@commitlint/config-conventional": "18.1.0", "@nguniversal/builders": "12.1.3", + "@nx/jest": "16.10.0", + "@nx/node": "16.10.0", + "@nx/workspace": "16.10.0", + "@taiga-ui/browserslist-config": "0.3.0", + "@taiga-ui/prettier-config": "0.4.0", "@tinkoff/linters": "0.6.0", + "@types/babel__traverse": "7.0.6", "@types/dompurify": "2.4.0", + "@types/estree": "1.0.0", "@types/express": "4.17.20", "@types/jasmine": "3.10.13", "@types/jasminewd2": "2.0.11", @@ -83,51 +104,38 @@ "coveralls": "3.1.1", "husky": "8.0.3", "jasmine-core": "3.99.1", - "@types/babel__traverse": "7.0.6", "jasmine-spec-reporter": "5.0.2", "karma": "6.4.2", "karma-chrome-launcher": "3.2.0", "karma-coverage-istanbul-reporter": "3.0.3", "karma-jasmine": "4.0.2", "karma-jasmine-html-reporter": "2.1.0", + "lerna": "7.4.1", "lint-staged": "10.5.4", - "@taiga-ui/browserslist-config": "0.3.0", - "@types/estree": "1.0.0", "ng-bullet": "1.0.3", "ng-packagr": "12.2.7", + "nx": "16.10.0", + "nx-cloud": "16.4.0", "prettier": "3.0.3", "standard-version": "9.5.0", "stylelint": "10.1.0", + "terser-webpack-plugin": "5.3.9", "ts-node": "9.1.1", "tsickle": "0.46.3", "tslint": "6.1.3", "tsutils": "3.21.0", - "@nx/jest": "16.10.0", - "@nx/node": "16.10.0", - "@nx/workspace": "16.10.0", - "nx": "16.10.0", - "nx-cloud": "16.4.0", - "lerna": "7.4.1", "typescript": "4.3.5", "wait-on": "6.0.1", "webpack": "5.89.0" }, - "husky": { - "hooks": { - "pre-commit": "lint-staged && npm run typecheck" - } - }, - "lint-staged": { - "*.{js,ts,html,md,less,json}": ["prettier --write", "git add"], - "*.ts": "tslint" + "engines": { + "node": ">= 10", + "npm": ">= 3" }, + "schematics": "./schematics/collection.json", "standard-version": { "scripts": { "postbump": "node scripts/syncVersions.js && git add **/package.json" } - }, - "engines": { - "node": ">= 10", - "npm": ">= 3" } } diff --git a/prettier.config.js b/prettier.config.js deleted file mode 100644 index 280d332a..00000000 --- a/prettier.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - ...require('@tinkoff/linters/prettier/prettier.config'), -}; diff --git a/projects/demo/angular.json b/projects/demo/angular.json index f0c99a53..492d11df 100644 --- a/projects/demo/angular.json +++ b/projects/demo/angular.json @@ -22,10 +22,7 @@ "tsConfig": "tsconfig.stackblitz.json", "aot": false, "assets": ["src/favicon.ico"], - "styles": [ - "node_modules/highlight.js/styles/idea.css", - "src/styles.css" - ], + "styles": ["node_modules/highlight.js/styles/idea.css", "src/styles.css"], "scripts": [] }, "configurations": { diff --git a/projects/demo/project.json b/projects/demo/project.json index 3ce6f7a3..b0cdb546 100644 --- a/projects/demo/project.json +++ b/projects/demo/project.json @@ -20,10 +20,7 @@ "tsConfig": "tsconfig.json", "aot": false, "assets": ["projects/demo/src/favicon.ico"], - "styles": [ - "node_modules/highlight.js/styles/idea.css", - "projects/demo/src/styles.css" - ], + "styles": ["node_modules/highlight.js/styles/idea.css", "projects/demo/src/styles.css"], "scripts": [], "vendorChunk": true, "extractLicenses": false, diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html index 7015f6ec..ce4ce95b 100644 --- a/projects/demo/src/app/app.component.html +++ b/projects/demo/src/app/app.component.html @@ -1,11 +1,13 @@

Polymorpheus

- Polymorpheus is a tiny library for polymorphic templates in Angular. + Polymorpheus + is a tiny library for polymorphic templates in Angular.
-
- It is 1 KB gzip, dependency free and allows you to make pretty cool things. -
- +
It is 1 KB gzip, dependency free and allows you to make pretty cool things.
+

How to use?

Keep in mind these are heavily simplified examples.
@@ -13,51 +15,57 @@

How to use?

But real life cases would use the same techniques.
-
- This way, if you would pass a string — it would be used as SVG icon source -
+
This way, if you would pass a string — it would be used as SVG icon source

Go on...

Unleash customization!

- By now you've seen that Polymorpheus allows us to be pretty flexible. - Let's see how far we can push our very simple ComboBox implementation. + By now you've seen that + Polymorpheus + allows us to be pretty flexible. Let's see how far we can push our very simple ComboBox implementation.

Takeaway

- Polymorpheus allows you to write Design-agnostic code. In a - sense, it is a lot like generics — you wrap your logic around what you - receive from the user without dependence on what exactly you have received. + Polymorpheus + allows you to write + Design-agnostic + code. In a sense, it is a lot like + generics + — you wrap your logic around what you receive from the user without dependence on what exactly you have received.

- This concept frees you from flags and specific code for particular use cases. You only - define boundaries of how your component looks like and implement actual work logic. - Visual customization is delegated to whoever uses your component and is easily reused. + This concept frees you from flags and specific code for particular use cases. You only define boundaries of how your + component looks like and implement actual work logic. Visual customization is delegated to whoever uses your + component and is easily reused.

- Other good examples that could benefit from this idea are popups, notifications, - tooltips, dropdowns, error messages etc. + Other good examples that could benefit from this idea are popups, notifications, tooltips, dropdowns, error messages + etc.

Read more about it in this article - and check out entire polymorpheus based UI library of 200+ components - and directives: - + and check out + entire polymorpheus based UI library + of 200+ components and directives: + Taiga UI @@ -69,19 +77,32 @@

Takeaway

href="https://www.flaticon.com/authors/those-icons" target="_blank" title="Those Icons" - >Those Icons + Those Icons + and - Vectto + Vectto + from - www.flaticon.com + www.flaticon.com + and - www.iconfinder.com + www.iconfinder.com + diff --git a/projects/demo/src/app/modules/comboBox/comboBox.template.html b/projects/demo/src/app/modules/comboBox/comboBox.template.html index f0b424a0..457af554 100644 --- a/projects/demo/src/app/modules/comboBox/comboBox.template.html +++ b/projects/demo/src/app/modules/comboBox/comboBox.template.html @@ -2,9 +2,9 @@ [content]="icon" [placeholder]="placeholder" [value]="stringValue" - (valueChange)="onValueChange($event)" (focusout)="onFocusOut()" (keydown.arrowDown)="onArrowDown()" + (valueChange)="onValueChange($event)" > - Now we will combine those with interactive icon passed to input as template: - +Now we will combine those with interactive icon passed to input as template:

- +

- +

- Important note: while ng-template works - just fine in most cases — it follows change detection of the view where it was - defined not where it was instantiated. Therefore, if - you pass it up along (or parallel) the view tree — changes initiated inside template - might not propagate as expected. You can use + Important note: + while + ng-template + works just fine in most cases — it follows change detection of the view where it was + defined + not where it was + instantiated + . Therefore, if you pass it up along (or parallel) the view tree — changes initiated inside template might not + propagate as expected. You can use polymorpheus directive to get around this issue:
diff --git a/projects/demo/src/app/modules/input/input.template.html b/projects/demo/src/app/modules/input/input.template.html index 46863446..5f374bbd 100644 --- a/projects/demo/src/app/modules/input/input.template.html +++ b/projects/demo/src/app/modules/input/input.template.html @@ -2,10 +2,16 @@ #input type="text" class="input" - [placeholder]="placeholder" [ngModel]="value" + [placeholder]="placeholder" (ngModelChange)="onValueChange($event)" /> -
-
+
+
diff --git a/projects/demo/src/app/modules/inputDemo/inputDemo.template.html b/projects/demo/src/app/modules/inputDemo/inputDemo.template.html index b6aa148e..6237a073 100644 --- a/projects/demo/src/app/modules/inputDemo/inputDemo.template.html +++ b/projects/demo/src/app/modules/inputDemo/inputDemo.template.html @@ -3,9 +3,15 @@ *polymorpheusOutlet:

- +

- +

diff --git a/projects/demo/src/app/modules/menu/menu.template.html b/projects/demo/src/app/modules/menu/menu.template.html index 0f2062fd..0d56c955 100644 --- a/projects/demo/src/app/modules/menu/menu.template.html +++ b/projects/demo/src/app/modules/menu/menu.template.html @@ -1,5 +1,8 @@ -
- {{text}} +
+ {{ text }}
- {{primitive}} + {{ primitive }}
diff --git a/projects/demo/src/app/modules/menuDemo/menuDemo.template.html b/projects/demo/src/app/modules/menuDemo/menuDemo.template.html index 86c79422..bd7e6928 100644 --- a/projects/demo/src/app/modules/menuDemo/menuDemo.template.html +++ b/projects/demo/src/app/modules/menuDemo/menuDemo.template.html @@ -1,8 +1,14 @@ - Next let's create a menu: +Next let's create a menu:

- +

- +

diff --git a/projects/demo/src/app/modules/starWars/starWars.style.less b/projects/demo/src/app/modules/starWars/starWars.style.less index 7ed18fb2..a2b8e7dc 100644 --- a/projects/demo/src/app/modules/starWars/starWars.style.less +++ b/projects/demo/src/app/modules/starWars/starWars.style.less @@ -20,7 +20,9 @@ padding: 10px 16px; outline: none; overflow: hidden; - transition: background 0.3s, padding 0.3s; + transition: + background 0.3s, + padding 0.3s; &:before { content: ''; @@ -33,7 +35,9 @@ background: inherit; transform: scale(0.01); opacity: 0; - transition: transform 0.3s, opacity 0.3s; + transition: + transform 0.3s, + opacity 0.3s; } &_active { diff --git a/projects/demo/src/app/modules/starWars/starWars.template.html b/projects/demo/src/app/modules/starWars/starWars.template.html index 83e0ec76..01a51231 100644 --- a/projects/demo/src/app/modules/starWars/starWars.template.html +++ b/projects/demo/src/app/modules/starWars/starWars.template.html @@ -1,21 +1,29 @@
- Yoda + Yoda

Strong is not the force in you...

- +
-
- {{getInitials(item.name)}} +
+ {{ getInitials(item.name) }}
Race
-
{{item.name}}
+
{{ item.name }}
 diff --git a/projects/demo/src/app/modules/starWarsDemo/starWarsDemo.template.html b/projects/demo/src/app/modules/starWarsDemo/starWarsDemo.template.html index 29ffea2c..a26317d5 100644 --- a/projects/demo/src/app/modules/starWarsDemo/starWarsDemo.template.html +++ b/projects/demo/src/app/modules/starWarsDemo/starWarsDemo.template.html @@ -1,4 +1,7 @@

- +

diff --git a/projects/demo/src/app/modules/tab/tab.template.html b/projects/demo/src/app/modules/tab/tab.template.html index 5fc53b61..55349027 100644 --- a/projects/demo/src/app/modules/tab/tab.template.html +++ b/projects/demo/src/app/modules/tab/tab.template.html @@ -1,15 +1,21 @@ - {{text}} -
+{{ text }} +
- {{primitive}} + {{ primitive }}
-
+
diff --git a/projects/demo/src/app/modules/tabs/tabs.template.html b/projects/demo/src/app/modules/tabs/tabs.template.html index 8e00cf3b..85b9e322 100644 --- a/projects/demo/src/app/modules/tabs/tabs.template.html +++ b/projects/demo/src/app/modules/tabs/tabs.template.html @@ -5,6 +5,6 @@ (click)="onClick(tab)" > - {{primitive}} + {{ primitive }}
diff --git a/projects/demo/src/app/modules/tabsDemo/tabsDemo.template.html b/projects/demo/src/app/modules/tabsDemo/tabsDemo.template.html index 89546b11..6dac6f04 100644 --- a/projects/demo/src/app/modules/tabsDemo/tabsDemo.template.html +++ b/projects/demo/src/app/modules/tabsDemo/tabsDemo.template.html @@ -1,41 +1,58 @@ - Tabs that are used in this demo are a lot like the menu: +Tabs that are used in this demo are a lot like the menu:

- +

- Let's show the strength of *polymorpheusOutlet by - creating a tab component. + Let's show the strength of + *polymorpheusOutlet + by creating a + tab + component.

Making it a separate component will allow us to reuse it.

- Avatar + Avatar

- Here we have two levels of PolymorpheusContent — one - inside tabs and another one as a tab object property. - This case is a nice explanation of polymorphic templates concept. - These tabs are configured to adapt to different content — template is shown as is - while primitives are treated differently. Numbers are shown in a 'badge' component - while string is used as source for SVG icon. + Here we have two levels of + PolymorpheusContent + — one inside + tabs + and another one as a tab object property. This case is a nice explanation of + polymorphic templates + concept. These tabs are configured to adapt to different content — template is shown as is while primitives are + treated differently. Numbers are shown in a 'badge' component while string is used as source for SVG icon.

Take a look at the source code for - tab component: + tab + component:

- +

- To use component with Polymorpheus we need to wrap it with a simple - class: + To use component with + Polymorpheus + we need to wrap it with a simple class:
If you will use it within lazy modules, you can pass Injector diff --git a/projects/demo/src/styles.css b/projects/demo/src/styles.css index 4760c82b..4f51e5fc 100644 --- a/projects/demo/src/styles.css +++ b/projects/demo/src/styles.css @@ -1,6 +1,5 @@ body { - font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', system-ui, 'Roboto', - 'Helvetica Neue', sans-serif; + font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', system-ui, 'Roboto', 'Helvetica Neue', sans-serif; color: #333; margin: 0 auto; padding: 24px; @@ -25,7 +24,7 @@ h2 { } img { - vertical-align: middle + vertical-align: middle; } a { diff --git a/projects/ng-polymorpheus/CHANGELOG.md b/projects/ng-polymorpheus/CHANGELOG.md index 90be3dbd..1f94da49 100644 --- a/projects/ng-polymorpheus/CHANGELOG.md +++ b/projects/ng-polymorpheus/CHANGELOG.md @@ -1,7 +1,7 @@ # Change Log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. # 4.2.0 (2023-10-12) @@ -9,158 +9,185 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline # Changelog -All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +All notable changes to this project will be documented in this file. See +[standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. ## [4.1.0](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.11...v4.1.0) (2023-04-11) ### Features -- **outlet:** add `SafeValue` support ([#76](https://github.com/taiga-family/ng-polymorpheus/issues/76)) ([f9608be](https://github.com/taiga-family/ng-polymorpheus/commit/f9608be656675f6958b8e38d5e49010c136b51cd)) +- **outlet:** add `SafeValue` support ([#76](https://github.com/taiga-family/ng-polymorpheus/issues/76)) + ([f9608be](https://github.com/taiga-family/ng-polymorpheus/commit/f9608be656675f6958b8e38d5e49010c136b51cd)) ### [4.0.11](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.10...v4.0.11) (2023-04-10) ### Features -- **component:** make context `any` by default ([#73](https://github.com/taiga-family/ng-polymorpheus/issues/73)) ([a7fbd7d](https://github.com/taiga-family/ng-polymorpheus/commit/a7fbd7d0db8cce0bd653021e96dd3901ff849695)) +- **component:** make context `any` by default ([#73](https://github.com/taiga-family/ng-polymorpheus/issues/73)) + ([a7fbd7d](https://github.com/taiga-family/ng-polymorpheus/commit/a7fbd7d0db8cce0bd653021e96dd3901ff849695)) ### [4.0.10](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.9...v4.0.10) (2022-11-14) ### Bug Fixes -- **template:** fix untyped template ([8c99c96](https://github.com/taiga-family/ng-polymorpheus/commit/8c99c96b44a93a79de9a00e540f1f06e98bb44dc)) +- **template:** fix untyped template + ([8c99c96](https://github.com/taiga-family/ng-polymorpheus/commit/8c99c96b44a93a79de9a00e540f1f06e98bb44dc)) ### [4.0.9](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.8...v4.0.9) (2022-11-13) ### Bug Fixes -- **outlet:** properly loosen context type ([#60](https://github.com/taiga-family/ng-polymorpheus/issues/60)) ([9c8075e](https://github.com/taiga-family/ng-polymorpheus/commit/9c8075eb2ca33a3b38e209ec8b1f29bfea2c3056)) +- **outlet:** properly loosen context type ([#60](https://github.com/taiga-family/ng-polymorpheus/issues/60)) + ([9c8075e](https://github.com/taiga-family/ng-polymorpheus/commit/9c8075eb2ca33a3b38e209ec8b1f29bfea2c3056)) ### [4.0.8](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.7...v4.0.8) (2022-11-12) ### Bug Fixes -- **outlet:** loosen context type restriction ([#58](https://github.com/taiga-family/ng-polymorpheus/issues/58)) ([48c2ad3](https://github.com/taiga-family/ng-polymorpheus/commit/48c2ad36b38696ed32405fa8458e2fd21565d7ba)) +- **outlet:** loosen context type restriction ([#58](https://github.com/taiga-family/ng-polymorpheus/issues/58)) + ([48c2ad3](https://github.com/taiga-family/ng-polymorpheus/commit/48c2ad36b38696ed32405fa8458e2fd21565d7ba)) ### [4.0.7](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.6...v4.0.7) (2022-09-05) ### Features -- compat with Angular 14 and TS 4.8 ([#56](https://github.com/taiga-family/ng-polymorpheus/issues/56)) ([95b932f](https://github.com/taiga-family/ng-polymorpheus/commit/95b932f50d8b228020aca003cfe24d897bdd6c8c)) +- compat with Angular 14 and TS 4.8 ([#56](https://github.com/taiga-family/ng-polymorpheus/issues/56)) + ([95b932f](https://github.com/taiga-family/ng-polymorpheus/commit/95b932f50d8b228020aca003cfe24d897bdd6c8c)) ### [4.0.6](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.5...v4.0.6) (2022-08-16) ### Bug Fixes -- default context to `any` for template too ([fcb2f0e](https://github.com/taiga-family/ng-polymorpheus/commit/fcb2f0e730bcb907d77d664c290aef2dfdf39ab3)) +- default context to `any` for template too + ([fcb2f0e](https://github.com/taiga-family/ng-polymorpheus/commit/fcb2f0e730bcb907d77d664c290aef2dfdf39ab3)) ### [4.0.5](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.4...v4.0.5) (2022-08-16) ### Bug Fixes -- default content generic to `any` for better base compatibility ([4f8d874](https://github.com/taiga-family/ng-polymorpheus/commit/4f8d8748cdb9bd23a8a0041996acb0f0d123a8ab)) +- default content generic to `any` for better base compatibility + ([4f8d874](https://github.com/taiga-family/ng-polymorpheus/commit/4f8d8748cdb9bd23a8a0041996acb0f0d123a8ab)) ### [4.0.4](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.3...v4.0.4) (2022-07-20) ### Bug Fixes -- don't instantiate template with function content returning null ([#55](https://github.com/taiga-family/ng-polymorpheus/issues/55)) ([88a43d5](https://github.com/taiga-family/ng-polymorpheus/commit/88a43d5f1daa9a6090455d172249972b10a351b9)) +- don't instantiate template with function content returning null + ([#55](https://github.com/taiga-family/ng-polymorpheus/issues/55)) + ([88a43d5](https://github.com/taiga-family/ng-polymorpheus/commit/88a43d5f1daa9a6090455d172249972b10a351b9)) ### [4.0.3](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.2...v4.0.3) (2022-07-20) ### Bug Fixes -- don't instantiate template if content is null ([4d58d03](https://github.com/taiga-family/ng-polymorpheus/commit/4d58d0338ffa769ceea5cdb967c0fcae3a0d6595)) +- don't instantiate template if content is null + ([4d58d03](https://github.com/taiga-family/ng-polymorpheus/commit/4d58d0338ffa769ceea5cdb967c0fcae3a0d6595)) ### [4.0.2](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.1...v4.0.2) (2022-07-19) ### Features -- properly type primitive context ([#54](https://github.com/taiga-family/ng-polymorpheus/issues/54)) ([ca295de](https://github.com/taiga-family/ng-polymorpheus/commit/ca295de2c99cb67272543d969b0f0c22ec524d07)) +- properly type primitive context ([#54](https://github.com/taiga-family/ng-polymorpheus/issues/54)) + ([ca295de](https://github.com/taiga-family/ng-polymorpheus/commit/ca295de2c99cb67272543d969b0f0c22ec524d07)) ### [4.0.1](https://github.com/taiga-family/ng-polymorpheus/compare/v4.0.0...v4.0.1) (2022-07-15) ### Features -- improve typings ([b250d5d](https://github.com/taiga-family/ng-polymorpheus/commit/b250d5d2a64ba2f0e21fc0625cd2e1e6ed860b38)) -- improve typings ([#52](https://github.com/taiga-family/ng-polymorpheus/issues/52)) ([5272b4d](https://github.com/taiga-family/ng-polymorpheus/commit/5272b4d65bd88650041d704bf3909ebe55899642)) +- improve typings + ([b250d5d](https://github.com/taiga-family/ng-polymorpheus/commit/b250d5d2a64ba2f0e21fc0625cd2e1e6ed860b38)) +- improve typings ([#52](https://github.com/taiga-family/ng-polymorpheus/issues/52)) + ([5272b4d](https://github.com/taiga-family/ng-polymorpheus/commit/5272b4d65bd88650041d704bf3909ebe55899642)) ## [4.0.0](https://github.com/taiga-family/ng-polymorpheus/compare/v3.1.8...v4.0.0) (2021-05-24) ### Features -- **outlet:** switch to using structural directive ([#30](https://github.com/taiga-family/ng-polymorpheus/issues/30)) ([99c8108](https://github.com/taiga-family/ng-polymorpheus/commit/99c81087fffb7161f63271a207456c61607699f5)) +- **outlet:** switch to using structural directive ([#30](https://github.com/taiga-family/ng-polymorpheus/issues/30)) + ([99c8108](https://github.com/taiga-family/ng-polymorpheus/commit/99c81087fffb7161f63271a207456c61607699f5)) ### BREAKING CHANGES: -- Bumped Angular to version 12 and Ivy compilation -- **Entire** syntax has changed to structural directive +- Bumped Angular to version 12 and Ivy compilation +- **Entire** syntax has changed to structural directive ### [3.1.8](https://github.com/taiga-family/ng-polymorpheus/compare/v3.1.7...v3.1.8) (2021-05-14) ### Bug Fixes -- **template:** fix falling back to string generic ([43cc5f0](https://github.com/taiga-family/ng-polymorpheus/commit/43cc5f0dec11c29505b8e6b3344dae6ae628c1f5)) +- **template:** fix falling back to string generic + ([43cc5f0](https://github.com/taiga-family/ng-polymorpheus/commit/43cc5f0dec11c29505b8e6b3344dae6ae628c1f5)) ### [3.1.7](https://github.com/taiga-family/ng-polymorpheus/compare/v3.1.6...v3.1.7) (2021-05-13) ### Bug Fixes -- **template:** fix default generic value ([e420116](https://github.com/taiga-family/ng-polymorpheus/commit/e420116086e280bf42b5453b26cb5a8d92b89f17)) +- **template:** fix default generic value + ([e420116](https://github.com/taiga-family/ng-polymorpheus/commit/e420116086e280bf42b5453b26cb5a8d92b89f17)) ## [3.1.0](https://github.com/taiga-family/ng-polymorpheus/compare/3.0.0...v3.1.0) (2021-04-29) ### Features -- **template:** add a way to type context ([#27](https://github.com/taiga-family/ng-polymorpheus/issues/27)) ([f4141f4](https://github.com/taiga-family/ng-polymorpheus/commit/f4141f4)) +- **template:** add a way to type context ([#27](https://github.com/taiga-family/ng-polymorpheus/issues/27)) + ([f4141f4](https://github.com/taiga-family/ng-polymorpheus/commit/f4141f4)) ## [3.0.0](https://github.com/taiga-family/ng-polymorpheus/compare/v2.1.0...v3.0.0) (2020-12-24) ### Features -- **outlet:** remove display: block ([#25](https://github.com/taiga-family/ng-polymorpheus/issues/25)) ([9dcd7f8](https://github.com/taiga-family/ng-polymorpheus/commit/9dcd7f8fa1bab685f4fb41b40de9d14c7d00edea)) +- **outlet:** remove display: block ([#25](https://github.com/taiga-family/ng-polymorpheus/issues/25)) + ([9dcd7f8](https://github.com/taiga-family/ng-polymorpheus/commit/9dcd7f8fa1bab685f4fb41b40de9d14c7d00edea)) ### BREAKING CHANGES: -- Bumped Angular to version 9 -- Remove the component selector for outlet +- Bumped Angular to version 9 +- Remove the component selector for outlet ## [2.1.0](https://github.com/taiga-family/ng-polymorpheus/compare/v2.0.0...v2.1.0) (2020-05-25) ### Features -- **outlet:** allow attribute usage so it can be applied to native tags ([#17](https://github.com/taiga-family/ng-polymorpheus/issues/17)) ([62d7a5a](https://github.com/taiga-family/ng-polymorpheus/commit/62d7a5a)) +- **outlet:** allow attribute usage so it can be applied to native tags + ([#17](https://github.com/taiga-family/ng-polymorpheus/issues/17)) + ([62d7a5a](https://github.com/taiga-family/ng-polymorpheus/commit/62d7a5a)) ### Bug Fixes -- **template:** remove default context type to prevent errors with Ivy full template check +- **template:** remove default context type to prevent errors with Ivy full template check ## [2.0.0](https://github.com/taiga-family/ng-polymorpheus/compare/v1.0.2...v2.0.0) (2020-02-14) ### Features -- **component:** Polymorpheus components now behave the same way as Angular templates and mutate context instead of reinstantiating if the shape of the context stayed the same ([#12](https://github.com/taiga-family/ng-polymorpheus/issues/12)) ([57cd932](https://github.com/taiga-family/ng-polymorpheus/commit/57cd932)) +- **component:** Polymorpheus components now behave the same way as Angular templates and mutate context instead of + reinstantiating if the shape of the context stayed the same + ([#12](https://github.com/taiga-family/ng-polymorpheus/issues/12)) + ([57cd932](https://github.com/taiga-family/ng-polymorpheus/commit/57cd932)) ### BREAKING CHANGES: -- **POLYMORPHEUS_CONTEXT**: fix typo in the name +- **POLYMORPHEUS_CONTEXT**: fix typo in the name ### [1.0.4](https://github.com/taiga-family/ng-polymorpheus/compare/v1.0.2...v1.0.4) (2020-01-20) ### Bug Fixes -- **readme:** fix link to the Medium article ([#7](https://github.com/taiga-family/ng-polymorpheus/issues/7)) ([6b77cfd](https://github.com/taiga-family/ng-polymorpheus/commit/6b77cfd)) +- **readme:** fix link to the Medium article ([#7](https://github.com/taiga-family/ng-polymorpheus/issues/7)) + ([6b77cfd](https://github.com/taiga-family/ng-polymorpheus/commit/6b77cfd)) ### [1.0.3](https://github.com/taiga-family/ng-polymorpheus/compare/v1.0.2...v1.0.3) (2019-12-20) ### Features -- **template:** add default type as empty object ([#8](https://github.com/taiga-family/ng-polymorpheus/issues/8)) ([231ba62](https://github.com/taiga-family/ng-polymorpheus/commit/231ba62)) +- **template:** add default type as empty object ([#8](https://github.com/taiga-family/ng-polymorpheus/issues/8)) + ([231ba62](https://github.com/taiga-family/ng-polymorpheus/commit/231ba62)) ### [1.0.2](https://github.com/taiga-family/ng-polymorpheus/compare/v1.0.1...v1.0.2) (2019-10-02) ### Features -- **outlet:** simplify template ([6a4c6ad](https://github.com/taiga-family/ng-polymorpheus/commit/6a4c6ad)) +- **outlet:** simplify template ([6a4c6ad](https://github.com/taiga-family/ng-polymorpheus/commit/6a4c6ad)) ## 1.0.0 (2019-09-26) diff --git a/projects/ng-polymorpheus/README.md b/projects/ng-polymorpheus/README.md index 2ae61ba6..83a7ecc7 100644 --- a/projects/ng-polymorpheus/README.md +++ b/projects/ng-polymorpheus/README.md @@ -14,27 +14,25 @@ It abstracts over different ways of view customization in Angular with one simple _structural directive_: ```html - - {{text}} - +{{text}} ``` **Content** accepts: -- primitives like `number` or `string` -- functions that take `context` as argument and return a primitive -- templates that get instantiated with given `context` -- components that would get `context` injected through DI +- primitives like `number` or `string` +- functions that take `context` as argument and return a primitive +- templates that get instantiated with given `context` +- components that would get `context` injected through DI **Context** is optional when you need your **content** to adapt to the situation ## How to use it? -Typical use case would be a component that accepts visual customization and defines -context by itself. Say a menu list where you can configure how each item should look -like by passing a template. And context would be item itself and, for example, -whether it is focused or not. +Typical use case would be a component that accepts visual customization and defines context by itself. Say a menu list +where you can configure how each item should look like by passing a template. And context would be item itself and, for +example, whether it is focused or not. Please see [extensive demo](https://codesandbox.io/s/github/taiga-family/ng-polymorpheus/tree/master/projects/demo). -You can also [read about this concept in detail](https://blog.angularindepth.com/agnostic-components-in-angular-2427923b742d). +You can also +[read about this concept in detail](https://blog.angularindepth.com/agnostic-components-in-angular-2427923b742d). diff --git a/projects/ng-polymorpheus/package.json b/projects/ng-polymorpheus/package.json index 3faf5c25..981076b1 100644 --- a/projects/ng-polymorpheus/package.json +++ b/projects/ng-polymorpheus/package.json @@ -1,10 +1,6 @@ { "name": "@tinkoff/ng-polymorpheus", "version": "4.2.0", - "peerDependencies": { - "@angular/core": ">=12.0.0", - "@angular/platform-browser": ">=12.0.0" - }, "description": "This is a tiny library for customizing components appearance", "keywords": [ "angular", @@ -20,12 +16,19 @@ "ngTemplateOutlet", "ngComponentOutlet" ], - "license": "Apache-2.0", - "authors": ["Roman Sedov ", "Alex Inkin "], - "repository": "https://github.com/taiga-family/ng-polymorpheus", + "homepage": "https://github.com/taiga-family/ng-polymorpheus#README", "bugs": "https://github.com/taiga-family/ng-polymorpheus/issues", + "repository": "https://github.com/taiga-family/ng-polymorpheus", + "license": "Apache-2.0", "dependencies": { "tslib": "2.6.2" }, - "homepage": "https://github.com/taiga-family/ng-polymorpheus#README" + "peerDependencies": { + "@angular/core": ">=12.0.0", + "@angular/platform-browser": ">=12.0.0" + }, + "authors": [ + "Roman Sedov ", + "Alex Inkin " + ] } diff --git a/projects/ng-polymorpheus/src/classes/component.ts b/projects/ng-polymorpheus/src/classes/component.ts index da1fa412..38ec546c 100644 --- a/projects/ng-polymorpheus/src/classes/component.ts +++ b/projects/ng-polymorpheus/src/classes/component.ts @@ -10,7 +10,10 @@ import {POLYMORPHEUS_CONTEXT} from '../tokens/context'; * TODO: Remove second generic as it is irrelevant, remove `null` from injector type */ export class PolymorpheusComponent { - constructor(readonly component: Type, private readonly i?: Injector | null) {} + constructor( + readonly component: Type, + private readonly i?: Injector | null, + ) {} createInjector(injector: Injector, useValue?: C): Injector { return Injector.create({ diff --git a/projects/ng-polymorpheus/src/tests/outlet.spec.ts b/projects/ng-polymorpheus/src/tests/outlet.spec.ts index 1606b779..17149cd5 100644 --- a/projects/ng-polymorpheus/src/tests/outlet.spec.ts +++ b/projects/ng-polymorpheus/src/tests/outlet.spec.ts @@ -21,7 +21,10 @@ let COUNTER = 0; describe('PolymorpheusOutlet', () => { @Component({ template: ` -
+
@@ -40,10 +43,17 @@ describe('PolymorpheusOutlet', () => {
- + {{ value }} - + {{ value }} `, @@ -70,7 +80,9 @@ describe('PolymorpheusOutlet', () => { } @Component({ - template: ` Component: {{ context.$implicit }} `, + template: ` + Component: {{ context.$implicit }} + `, changeDetection: ChangeDetectionStrategy.OnPush, }) class ComponentContent { @@ -275,7 +287,11 @@ describe('PolymorpheusTemplate', () => { - + {{ value.name }} `,