diff --git a/.eslintignore b/.eslintignore index 6df258b..7b5137d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,4 @@ -speccer.js -scripts/server.js +dts +node_modules +coverage +dist diff --git a/.eslintrc b/.eslintrc index 81cffe8..1f5ffe2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,4 +1,13 @@ { + "overrides": [ + { + "files": ["**/__tests__/**"], + "env": { + "browser": true + } + } + ], + "root": true, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "latest", @@ -9,33 +18,105 @@ }, "env": { "browser": true, - "amd": true, - "es2021": true, - "node": true, - "jest/globals": true + "es2021": true + }, + "plugins": ["@typescript-eslint"], + "settings": { + "import/resolver": { + "typescript": {} + } }, - "plugins": ["jest", "@typescript-eslint"], "rules": { - "comma-dangle": 1, + "import/order": [ + "error", + { + "groups": [ + "external", + "builtin", + "internal", + "parent", + "sibling", + "index" + ], + "pathGroupsExcludedImportTypes": ["internal"], + "alphabetize": { + "order": "asc", + "caseInsensitive": true + }, + "newlines-between": "always" + } + ], + "no-unused-vars": "off", "quotes": [1, "single"], + "import/no-named-as-default": 0, + "padded-blocks": ["error", "never"], + "one-var": ["error", "never"], + "comma-dangle": "off", + "@typescript-eslint/comma-dangle": "error", "no-undef": 2, "prefer-const": "error", - "one-var": ["error", "never"], - "padded-blocks": ["error", "never"], "padding-line-between-statements": [ "error", - { "blankLine": "always", "prev": "*", "next": "return" }, - { "blankLine": "always", "prev": "*", "next": "export" }, - { "blankLine": "always", "prev": "export", "next": "export" }, - { "blankLine": "always", "prev": "export", "next": "*" }, - { "blankLine": "always", "prev": "*", "next": "if" }, - { "blankLine": "always", "prev": "if", "next": "*" }, - { "blankLine": "always", "prev": "const", "next": "*" }, - { "blankLine": "always", "prev": "*", "next": "const" }, - { "blankLine": "always", "prev": "let", "next": "*" }, - { "blankLine": "always", "prev": "*", "next": "let" }, - { "blankLine": "always", "prev": "var", "next": "*" }, - { "blankLine": "always", "prev": "*", "next": "var" }, + { + "blankLine": "always", + "prev": "*", + "next": "return" + }, + { + "blankLine": "always", + "prev": "*", + "next": "export" + }, + { + "blankLine": "always", + "prev": "export", + "next": "export" + }, + { + "blankLine": "always", + "prev": "export", + "next": "*" + }, + { + "blankLine": "always", + "prev": "*", + "next": "if" + }, + { + "blankLine": "always", + "prev": "if", + "next": "*" + }, + { + "blankLine": "always", + "prev": "const", + "next": "*" + }, + { + "blankLine": "always", + "prev": "*", + "next": "const" + }, + { + "blankLine": "always", + "prev": "let", + "next": "*" + }, + { + "blankLine": "always", + "prev": "*", + "next": "let" + }, + { + "blankLine": "always", + "prev": "var", + "next": "*" + }, + { + "blankLine": "always", + "prev": "*", + "next": "var" + }, { "blankLine": "always", "prev": "const", @@ -73,22 +154,39 @@ } ], "global-strict": 0, - "indent": [1, 2, { "SwitchCase": 1 }], + "indent": [ + 1, + 2, + { + "SwitchCase": 1 + } + ], "no-extra-semi": 1, "no-underscore-dangle": 0, "no-console": 1, - "no-unused-vars": 1, - "no-trailing-spaces": [1, { "skipBlankLines": true }], + "no-trailing-spaces": [ + 1, + { + "skipBlankLines": true + } + ], "no-unreachable": 1, "no-alert": 0, - "semi": 1 + "semi": 1, + "import/no-unused-modules": [ + 1, + { + "unusedExports": true + } + ] }, "extends": [ "eslint:recommended", - "plugin:react/recommended", - "prettier", + "plugin:import/recommended", + "plugin:import/typescript", "plugin:compat/recommended", "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended" + "plugin:@typescript-eslint/recommended", + "prettier" ] } diff --git a/.github/labeler.yml b/.github/labeler.yml index 257e936..511a5ee 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -1,28 +1,73 @@ 'section: workflows': - - .github/workflows/** + - any: + - changed-files: + - any-glob-to-any-file: + - .github/workflows/** 'section: repo': - - '*' + - any: + - changed-files: + - any-glob-to-any-file: + - '*' 'experience: developer': - - 'dev' - - '.eslintignore' - - '.eslintrc.json' - - '.gitignore' - - '.npmrc' - - '.prettierrc' - - 'tslint.json' - - '.stylintrc' - - '.postcssrc.cjs' - - '.postcssrc.js' + - any: + - changed-files: + - any-glob-to-any-file: + - '.editorconfig' + - '.eslintignore' + - '.eslintrc.json' + - '.eslintrc.js' + - '.gitignore' + - '.release-it.json' + - '.renovate.json' + - '.npmrc' + - '.prettierrc' + - 'tslint.json' 'context: github': - - .github/** + - any: + - changed-files: + - any-glob-to-any-file: + - .github/** 'context: docker': - - Dockerfile + - any: + - changed-files: + - any-glob-to-any-file: + - Dockerfile 'context: npm': - - '.npmrc' + - any: + - changed-files: + - any-glob-to-any-file: + - '.npmrc' 'context: rollup': - - 'rollup.config.js' - - 'rollup.*.config.js' + - any: + - changed-files: + - any-glob-to-any-file: + - 'rollup.config.js' + - 'rollup.config.mjs' + - 'rollup.*.config.js' + - 'rollup.*.config.mjs' 'mindless: docs': - - '**/*.md' + - any: + - head-branch: ['^docs', 'docs'] + - changed-files: + - any-glob-to-any-file: + - '**/*.md' 'mindless: dependencies': - - 'package-lock.json' + - any: + - changed-files: + - any-glob-to-any-file: + - 'package-lock.json' + - 'yarn.lock' + +# Add '✨ feature' label to any PR where the head branch name starts with `feat` or has a `feat` section in the name +'✨ feature': + - head-branch: ['^feat', 'feat'] +'problems: bug': + - head-branch: ['^fix', 'fix'] +'mindless: chore': + - head-branch: ['^chore', 'chore'] +'improvements: enhancement': + - head-branch: ['^improvements', 'improvements'] + +# Add 'release' label to any PR that is opened against the `main` branch +release: + - base-branch: 'main' diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml index ff35cb6..2f5f0c7 100644 --- a/.github/workflows/check.yml +++ b/.github/workflows/check.yml @@ -8,28 +8,24 @@ on: push: branches: [ "main" ] paths: - - 'src' + - '.github/**' + - 'src/**' - 'package.json' - 'package-lock.json' - 'rollup.config.js' - 'tsconfig.json' - '.npmrc' - - 'README.md' - - 'api' - - '.github' pull_request: branches: [ "main" ] types: [opened, synchronize] # Workflow triggering events paths: - - 'src' + - '.github/**' + - 'src/**' - 'package.json' - 'package-lock.json' - 'rollup.config.js' - 'tsconfig.json' - - '.npmrc' - - 'README.md' - - 'api' - - '.github' + - '.npmrc' # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -45,25 +41,32 @@ jobs: steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: fetch-depth: 0 # Checkout all branches and tags - name: Setup Node.js environment - uses: actions/setup-node@v2.5.2 + uses: actions/setup-node@v4 with: - node-version: 18 + node-version: '>=20.11.1' - name: Install dependencies run: | # Install and link dependencies npm i - name: Build # Build all packages run: npm run build + - name: Test + run: npm run test-ci + - name: Upload coverage reports to Codecov + uses: codecov/codecov-action@v4.0.1 + with: + token: ${{ secrets.CODECOV_TOKEN }} + slug: phun-ky/frameport notify: name: Notify failed check needs: check - if: failure() && github.event.pull_request == null + if: failure() runs-on: ubuntu-latest steps: - - uses: jayqi/failed-build-issue-action@v1 + - uses: jayqi/failed-build-issue-action@v1.2 with: github-token: ${{ secrets.GH_TOKEN }} diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml index f4ca32d..0596f3d 100644 --- a/.github/workflows/label.yml +++ b/.github/workflows/label.yml @@ -3,13 +3,13 @@ on: - pull_request_target jobs: - triage: + labeler: permissions: contents: read pull-requests: write runs-on: ubuntu-latest steps: - - uses: actions/labeler@v4 - with: + - id: label-the-PR + uses: actions/labeler@v5 + with: sync-labels: true - dot: true diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index a7962bb..0ed9141 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -7,6 +7,23 @@ on: pull_request: types: [closed] branches: [ "main" ] + paths: + - '.github/**' + - 'src/**' + - 'api/**' + - 'public/**' + - 'package.json' + - 'package-lock.json' + - 'rollup.config.js' + - 'tsconfig.json' + - '.npmrc' + - '.release-it.json' + - 'README.md' + - 'CONTRIBUTING.md' + - 'CODE_OF_CONDUCT.md' + - 'SECURITY.md' + - '.postcssrc.cjs' + - '.browserlistrc' workflow_dispatch: jobs: publish: @@ -22,13 +39,12 @@ jobs: fetch-depth: 0 # Checkout all branches and tags token: ${{ secrets.GH_TOKEN }} - name: Setup Node.js environment - uses: actions/setup-node@v2.5.2 + uses: actions/setup-node@v4 with: - node-version: 18 + node-version: '>=20.11.1' - name: Install dependencies run: | # Install and link dependencies npm i - git checkout -- package-lock.json - name: "Release" # Interesting step run: | git config user.name "${{ github.actor }}" @@ -40,10 +56,10 @@ jobs: notify: name: Notify failed build needs: publish - if: failure() && github.event.pull_request == null + if: failure() runs-on: ubuntu-latest steps: - - uses: jayqi/failed-build-issue-action@v1 + - uses: jayqi/failed-build-issue-action@v1.2 with: github-token: ${{ secrets.GH_TOKEN }} diff --git a/.gitignore b/.gitignore index 95d50a2..e052252 100644 --- a/.gitignore +++ b/.gitignore @@ -60,3 +60,4 @@ typings/ # next.js build output .next dts +dist diff --git a/.prettierrc b/.prettierrc index b4efa9c..83c76ba 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,6 @@ { "singleQuote": true, + "trailingComma": "none", "jsxBracketSameLine": true, "tabWidth": 2, "printWidth": 80 diff --git a/.release-it.json b/.release-it.json index a8683c7..d6647c9 100644 --- a/.release-it.json +++ b/.release-it.json @@ -1,5 +1,4 @@ { - "requireCleanWorkingDir": false, "git": { "commitMessage": "chore: 🤖 release v${version}" }, @@ -12,7 +11,7 @@ "skipChecks": true }, "hooks": { - "after:bump": "npm run build && npm run docs:gen && git status", + "after:bump": "npm run build && npm run docs:gen", "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}." }, "plugins": { diff --git a/README.md b/README.md index 51e9287..b8e58bd 100644 --- a/README.md +++ b/README.md @@ -4,24 +4,26 @@ > Frameport enables you to fake and display your responsive components in real life media queries! -[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![npm version](https://img.shields.io/npm/v/@phun-ky/frameport) ![issues](https://img.shields.io/github/issues/phun-ky/frameport) ![license](https://img.shields.io/npm/l/@phun-ky/frameport) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/frameport) ![npm](https://img.shields.io/npm/dm/%40phun-ky/frameport) ![GitHub Repo stars](https://img.shields.io/github/stars/phun-ky/frameport) - -1. [@phun-ky/frameport](#phun-kyframeport) - 1. [About](#about) - 2. [API](#api) - 3. [Demo](#demo) - 4. [Options](#options) - 5. [Usage](#usage) - 1. [Typescript](#typescript) - 2. [ESM](#esm) - 3. [Script](#script) - 6. [Advanced usage](#advanced-usage) - 1. [Lazy](#lazy) - 7. [Features](#features) - 8. [Via DOM](#via-dom) - 1. [Use templates as a target](#use-templates-as-a-target) - 2. [Use targets with different template](#use-targets-with-different-template) - 1. [Allowed tags](#allowed-tags) +[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![npm version](https://img.shields.io/npm/v/@phun-ky/frameport) ![issues](https://img.shields.io/github/issues/phun-ky/frameport) ![license](https://img.shields.io/npm/l/@phun-ky/frameport) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/frameport) ![npm](https://img.shields.io/npm/dm/%40phun-ky/frameport) ![GitHub Repo stars](https://img.shields.io/github/stars/phun-ky/frameport) [![codecov](https://codecov.io/gh/phun-ky/frameport/graph/badge.svg?token=VA91DL7ZLZ)](https://codecov.io/gh/phun-ky/frameport) + +- [@phun-ky/frameport](#phun-kyframeport) + - [About](#about) + - [API](#api) + - [Demo](#demo) + - [Options](#options) + - [Usage](#usage) + - [Typescript](#typescript) + - [ESM](#esm) + - [Script](#script) + - [Advanced usage](#advanced-usage) + - [Lazy](#lazy) + - [Features](#features) + - [Via DOM](#via-dom) + - [Use templates as a target](#use-templates-as-a-target) + - [Use targets with different template](#use-targets-with-different-template) + - [Allowed tags](#allowed-tags) + - [Contributing](#contributing) + - [Sponsor me](#sponsor-me) ## About @@ -62,7 +64,7 @@ Click [here for a demo on codepen.io](https://codepen.io/phun-ky/full/MWWWvLm) ### Typescript -Types can be found in `@phun-ky/frameport/frameport.d.ts`. +Types can be found in `@phun-ky/frameport/dist/frameport.d.ts`. ### ESM @@ -74,7 +76,7 @@ import frameport from '@phun-ky/frameport'; // do stuff frameport(document.getElementById('target'), { width: 667, - html: '