E2E Parcel #12042
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # | |
| on: | |
| schedule: | |
| - cron: '0 */4 * * *' | |
| push: | |
| branches: | |
| - master | |
| pull_request: | |
| paths: | |
| - .github/actions/prepare/action.yml | |
| - .github/workflows/e2e-parcel-workflow.yml | |
| - scripts/e2e-setup-ci.sh | |
| name: 'E2E Parcel' | |
| jobs: | |
| chore: | |
| name: 'Validating Parcel' | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: ./.github/actions/prepare | |
| - name: 'Running the integration test' | |
| run: | | |
| source scripts/e2e-setup-ci.sh | |
| yarn init -p | |
| yarn add -D parcel@nightly lodash @babel/core | |
| # See https://github.com/parcel-bundler/parcel/issues/9114 | |
| echo "packageExtensions: | |
| \"@parcel/fs@*\": | |
| dependencies: | |
| \"@parcel/core\": '*'" > .yarnrc.yml | |
| # JavaScript | |
| echo "import _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'JS'], ' '))}; printHello();" | tee index.js | |
| yarn parcel build index.js | |
| [[ "$(node dist/index.js)" = "Hello JS" ]] | |
| rm -rf dist index.js | |
| # TypeScript (Babel) | |
| echo "import * as _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'TS'], ' '))}; printHello();" | tee index.ts | |
| yarn parcel build index.ts | |
| [[ "$(node dist/index.js)" = "Hello TS" ]] | |
| rm -rf dist index.ts | |
| # TypeScript (tsc) | |
| yarn add -D @parcel/core@nightly @parcel/config-default@nightly @parcel/validator-typescript@nightly @types/lodash typescript | |
| echo "{\"extends\": \"@parcel/config-default\", \"validators\": {\"*.{ts,tsx}\": [\"@parcel/validator-typescript\"]}}" | tee .parcelrc | |
| echo "{\"compilerOptions\": { \"noImplicitAny\": true, \"removeComments\": true, \"preserveConstEnums\": true, \"sourceMap\": true}, \"include\": [\"index.ts\"]}" | tee tsconfig.json | |
| echo "import * as _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'TS'], ' '))}; printHello();" | tee index.ts | |
| yarn parcel build index.ts | |
| [[ "$(node dist/index.js)" = "Hello TS" ]] | |
| rm -rf dist index.ts tsconfig.json .parcelrc | |
| # Less | |
| yarn add -D bootstrap-less less postcss @parcel/optimizer-cssnano@nightly @parcel/packager-css@nightly @parcel/transformer-css@nightly @parcel/transformer-less@nightly @parcel/transformer-postcss@nightly | |
| mkdir src | |
| echo "import './main.less';" | tee src/index.js | |
| echo "@import 'bootstrap-less/bootstrap/index.less';@import './other.less';.box:extend(.hotpink) {width: 200px;height: 200px;}" | tee src/main.less | |
| echo ".hotpink {background: hotpink;}" | tee src/other.less | |
| yarn parcel build src/index.js | |
| ls dist | grep "index.css" | |
| rm -rf dist src | |
| # Yaml | |
| yarn add @parcel/transformer-yaml@nightly | |
| echo "import data from './data.yaml';console.log(data.berry.works.with[0]);" | tee index.js | |
| echo "berry: {works: {with: [Parcel]}}" | tee data.yaml | |
| yarn parcel build index.js | |
| [[ "$(node dist/index.js)" = "Parcel" ]] | |
| rm -rf dist index.js data.yaml | |
| # MDX | |
| yarn add react react-dom react-select @mdx-js/mdx @mdx-js/react@^1 @parcel/transformer-mdx@nightly | |
| echo "import page from './page.mdx'; console.log('MDX Built');" | tee index.js | |
| cat > page.mdx <<EOT | |
| import Select from 'react-select'; | |
| # Hello, *world*! | |
| <div style={{ padding: '20px', backgroundColor: 'tomato' }}> | |
| <h3>This is JSX</h3> | |
| </div> | |
| <Select /> | |
| EOT | |
| yarn parcel build index.js | |
| [[ "$(node dist/index.js)" = "MDX Built" ]] | |
| rm -rf dist index.js page.mdx | |
| # Assets | |
| echo "import 'url:./text.txt';" | tee index.js | |
| echo "Hello World" | tee text.txt | |
| yarn parcel build index.js | |
| ls dist | grep ".txt" | |
| rm -rf dist index.js text.txt | |
| # Tree-shaking | |
| echo "export function square(x) { return x * x } export function cube(x) { return x * x * x }" | tee math.js | |
| echo "import { cube } from './math.js'; console.log(cube(5));" | tee index.js | |
| yarn parcel build index.js | |
| [[ "$(node dist/index.js)" = "125" ]] | |
| ! cat dist/index.js | grep "square" | |
| rm -rf dist index.js math.js | |
| # Multiple entry modules | |
| mkdir src | |
| echo "import hyperCube from './hyperCube.js'; console.log(hyperCube(5));" | tee src/main.js | |
| echo "import cube from './cube.js'; console.log(cube(5));" | tee src/otherEntry.js | |
| echo "import square from './square.js'; export default function cube(x) { return square(x) * x; }" | tee src/cube.js | |
| echo "import cube from './cube.js'; export default function hyperCube(x) { return cube(x) * x; }" | tee src/hyperCube.js | |
| echo "export default function square(x) { return x * x; }" | tee src/square.js | |
| yarn parcel build src/main.js src/otherEntry.js | |
| [[ "$(node dist/main.js)" = "625" ]] | |
| [[ "$(node dist/otherEntry.js)" = "125" ]] | |
| ! cat dist/main.js | grep "cube" | |
| ! cat dist/otherEntry.js | grep "cube" | |
| rm -rf dist src |