diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 810c635d4..3f9c533d6 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -76,15 +76,9 @@ jobs: env: NODE_AUTH_TOKEN: ${{ secrets.NPM_GITHUB_PACKAGES }} - - name: Build Outline - run: yarn build --force - - - name: Build Storybook - run: yarn storybook:build - # Job to run build, and basic assurances the codebase is ready for additional processing. - build: - name: Build Codebase + build_outline: + name: Build Outline Codebase runs-on: ubuntu-latest needs: ['setup'] strategy: @@ -123,6 +117,54 @@ jobs: - name: Build Storybook run: yarn storybook:build + # Test initialization of a new project + build_project: + name: Initialize and Test Build of Project Codebase + runs-on: ubuntu-latest + needs: ['build_outline'] + strategy: + matrix: + node: [ 16, 18 ] + # The steps for the setup job. + steps: + # @see https://github.com/marketplace/actions/checkout + - name: Checkout Codebase + uses: actions/checkout@v3 + + - uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node }} + cache: 'yarn' + + # @see https://github.com/marketplace/actions/cache + # node_modules caching is validated by always running yarn install. + # Turborepo cache lives inside node_modules/.cache/turbo + - uses: actions/cache@v3 + id: yarn-cache + with: + path: | + node_modules + storybook-static + key: ${{ runner.os }}-node-${{ matrix.node }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-node-${{ matrix.node }}-yarn- + + - name: Install + run: yarn install --prefer-offline + + - name: Build from cache + run: yarn build + + - name: Generate a project + run: | + PROJDIR=$(mktemp -d) + cd $PROJDIR + npx ${{ github.workspace }}/packages/outline-cli init -a -l -s prj + cd prj + yarn install --prefer-offline + yarn build + yarn storybook:build + # Job to run package publishing process. test: name: Test Codebase @@ -175,7 +217,7 @@ jobs: name: "Publish: GitHub Pages" if: github.ref == 'refs/heads/next' runs-on: ubuntu-latest - needs: ['setup', 'build', 'test'] + needs: ['setup', 'build_outline', 'test'] # The steps for the setup job. steps: @@ -242,7 +284,7 @@ jobs: name: "Publish: GitHub Packages" runs-on: ubuntu-latest if: github.ref == 'refs/heads/release' - needs: ['setup', 'build', 'test'] + needs: ['setup', 'build_outline', 'test'] # The steps for the build job. steps: @@ -294,7 +336,7 @@ jobs: name: "Publish: NPM Packages" runs-on: ubuntu-latest if: github.ref == 'refs/heads/release' - needs: ['setup', 'build', 'test'] + needs: ['setup', 'build_outline', 'test'] # The steps for the build job. steps: @@ -343,7 +385,7 @@ jobs: chromatic-deployment: name: "Publish: Chromatic" runs-on: ubuntu-latest - needs: ['setup', 'build', 'test'] + needs: ['setup', 'build_outline', 'test'] steps: # @see https://github.com/marketplace/actions/checkout diff --git a/packages/outline-cli/src/actions/init/init-project.ts b/packages/outline-cli/src/actions/init/init-project.ts index 175ddeed2..2967d9a9e 100644 --- a/packages/outline-cli/src/actions/init/init-project.ts +++ b/packages/outline-cli/src/actions/init/init-project.ts @@ -100,6 +100,14 @@ export const initProject = (prompts: Prompts, local: boolean = false): void => { throw console.error(`${chalk.red('error')}: ${error}`); } + if (local) { + console.log( + `${chalk.blue('info')}: Linking outline packages for local development` + ); + execSync(`node scripts/link-for-local-dev.js ${__dirname}/../../../..`, { + stdio: [0, 1, 2], + }); + } console.log( `${chalk.green( 'success' diff --git a/packages/outline-core/src/controllers/light-dom-styles.ts b/packages/outline-core/src/controllers/light-dom-styles.ts index 3f2295202..843d19dfc 100644 --- a/packages/outline-core/src/controllers/light-dom-styles.ts +++ b/packages/outline-core/src/controllers/light-dom-styles.ts @@ -1,6 +1,6 @@ /* eslint-disable no-console */ import { ReactiveControllerHost, CSSResultGroup, CSSResult } from 'lit'; -import { addScopeToStyles } from '../internal/light-dom'; +import { addScopeToStyles } from '../internal/light-dom.mjs'; /** * The LightComStyles ReactiveController. diff --git a/packages/outline-core/src/internal/light-dom.d.mts b/packages/outline-core/src/internal/light-dom.d.mts new file mode 100644 index 000000000..7034d9137 --- /dev/null +++ b/packages/outline-core/src/internal/light-dom.d.mts @@ -0,0 +1,6 @@ +/** + * Add the scopeId to each CSS rule selector. + * Handle the :host and ::slotted selectors. + */ +export function addScopeToStyles(cssStyles: string, scopeId: string): string; +//# sourceMappingURL=light-dom.d.mts.map diff --git a/packages/outline-core/tsconfig.build.json b/packages/outline-core/tsconfig.build.json index 56eca1b2c..d72b610bb 100644 --- a/packages/outline-core/tsconfig.build.json +++ b/packages/outline-core/tsconfig.build.json @@ -2,7 +2,8 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": ".", - "outDir": "./dist" + "outDir": "./dist", + "allowJs": true }, "include": ["index.ts", "src/**/*", "tests/**/*"] } diff --git a/packages/outline-templates/default/package.json b/packages/outline-templates/default/package.json index 9ac390ea9..7e12fd972 100644 --- a/packages/outline-templates/default/package.json +++ b/packages/outline-templates/default/package.json @@ -91,7 +91,7 @@ "@phase2/outline-docs": "^0.0.9", "@phase2/outline-dropdown": "^0.1.0", "@phase2/outline-examples": "^0.0.3", - "@phase2/outline-form": "^0.0.1", + "@phase2/outline-form": "^0.0.6", "@phase2/outline-grid": "^0.0.1", "@phase2/outline-heading": "^0.1.0", "@phase2/outline-icon": "^0.1.0", diff --git a/packages/outline-templates/default/rollup.config.mjs b/packages/outline-templates/default/rollup.config.mjs index 1698aab8a..325c48cad 100644 --- a/packages/outline-templates/default/rollup.config.mjs +++ b/packages/outline-templates/default/rollup.config.mjs @@ -48,6 +48,7 @@ const defaultOutput = { 'src/components/**/*.css.lit.ts', 'src/components/**/*.test.ts', 'src/components/examples/**/*', + 'src/components/sample/**/*', ], }, output: [ diff --git a/packages/outline-templates/default/scripts/link-for-local-dev.js b/packages/outline-templates/default/scripts/link-for-local-dev.js new file mode 100644 index 000000000..2f1771e75 --- /dev/null +++ b/packages/outline-templates/default/scripts/link-for-local-dev.js @@ -0,0 +1,81 @@ +/** + * Takes an argument of the path to a directory containing package directories to link for + * local development. Will register them all for local development in the current project. + */ + +const fs = require('fs'); +const path = require('path'); +const { exec } = require('child_process'); + +const directoryPath = process.argv[2]; +const pattern = /^[^\.]/; + +const originalCwd = process.cwd(); + +if (!directoryPath) { + console.error( + 'Directory containing packages to link must be provided as first argument' + ); + process.exit(1); +} + +fs.readdir(directoryPath, async (err, files) => { + if (err) { + console.error(`Error reading directory: ${err}`); + process.exit(1); + } + + const matchingDirs = files.filter(file => { + const filePath = path.join(directoryPath, file); + return fs.statSync(filePath).isDirectory() && pattern.test(file); + }); + + if (matchingDirs.length === 0) { + console.log( + `No directories matching pattern: /${pattern}/ found in ${directoryPath}` + ); + process.exit(); + } + + for (const dir of matchingDirs) { + const dirPath = path.join(directoryPath, dir); + const pkgJsonPath = path.join(dirPath, 'package.json'); + + if (!fs.existsSync(pkgJsonPath)) { + console.error(`Skipping ${dirPath}: No 'package.json' file found`); + continue; + } + + const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath)); + + try { + process.chdir(dirPath); + + await execAsync('yarn unlink').catch(error => { + if (!error.message.includes('No registered package found')) { + throw error; + } + }); + + const linkOutput = await execAsync(`yarn link`); + process.chdir(originalCwd); + + const linkOutput2 = await execAsync(`yarn link ${pkgJson.name}`); + } catch (error) { + console.error(`Error linking package: ${error}`); + process.exit(1); + } + } +}); + +function execAsync(command) { + return new Promise((resolve, reject) => { + exec(command, (error, stdout, stderr) => { + if (error) { + reject(error); + } else { + resolve(stdout); + } + }); + }); +} diff --git a/packages/outline-templates/default/tsconfig.json b/packages/outline-templates/default/tsconfig.json index c0aa638e1..83bbb395b 100644 --- a/packages/outline-templates/default/tsconfig.json +++ b/packages/outline-templates/default/tsconfig.json @@ -42,6 +42,7 @@ "exclude": [ "./src/components/**/*.stories.ts", "./src/components/**/*.lit.ts", + "./src/components/sample/**/*", "node_modules" ] }