Merge pull request #384 from phase2/feature/local-dev-dx

Local development enhancements

Author: himerus

.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

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'

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.

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

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/**/*"]
 }

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",

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: [

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);
+      }
+    });
+  });
+}

packages/outline-templates/default/tsconfig.json

@@ -42,6 +42,7 @@
   "exclude": [
     "./src/components/**/*.stories.ts",
     "./src/components/**/*.lit.ts",
+    "./src/components/sample/**/*",
     "node_modules"
   ]
 }