Merge pull request #436 from phase2/feature/vite-test

feat(outline-core-link): Updated tooling and build for component.
phase2 · Feb 26, 2024 · 69bcf17 · 69bcf17
2 parents 06d1475 + e433ced
commit 69bcf17
Show file tree

Hide file tree

Showing 12 changed files with 447 additions and 110 deletions.
diff --git a/.changeset/kind-singers-tease.md b/.changeset/kind-singers-tease.md
@@ -0,0 +1,5 @@
+---
+'@phase2/outline-core-link': patch
+---
+
+Build tooling update.
diff --git a/package.json b/package.json
@@ -123,7 +123,9 @@
     "svgo": "^2.8.0",
     "tailwindcss": "3.0.0",
     "ts-lit-plugin": "^1.2.1",
+    "tsc": "^2.0.4",
     "turbo": "^1.10.16",
+    "typescript": "^5.2.2",
     "vite": "^4.1.4"
   },
   "bugs": {

diff --git a/packages/components/outline-core-link/index.html b/packages/components/outline-core-link/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="https://vitejs.dev/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Component Test Page</title>
+    <script src="/index.ts" type="module"></script>
+  </head>
+
+  <body>
+    <outline-core-link
+      ><a href="https://github.com/phase2/outline"
+        >Outline</a
+      ></outline-core-link
+    >
+  </body>
+</html>
diff --git a/packages/components/outline-core-link/package.json b/packages/components/outline-core-link/package.json
@@ -4,42 +4,40 @@
   "description": "The Outline Components for the web link component",
   "keywords": [
     "outline",
-    "web-components",
+    "web component",
     "design system",
     "link"
   ],
-  "main": "index.ts",
-  "types": "index.ts",
-  "typings": "index.d.ts",
+  "main": "dist/index.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "/dist/",
-    "/src/",
     "!/dist/tsconfig.build.tsbuildinfo"
   ],
   "author": "Phase2 Technology",
   "repository": {
     "type": "git",
     "url": "https://github.com/phase2/outline.git",
-    "directory": "packages/outline-core-link"
+    "directory": "packages/components/outline-core-link"
   },
   "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-link",
   "license": "BSD-3-Clause",
   "scripts": {
-    "build": "node ../../../scripts/build.js",
+    "build": "vite build && npx tsc --project tsconfig.build.json",
     "package": "yarn publish"
   },
   "dependencies": {
-    "lit": "^3.1.2",
-    "tslib": "^2.1.0"
+    "lit": "^3.1.2"
   },
   "publishConfig": {
     "access": "public"
   },
   "exports": {
-    ".": "./index.ts"
+    ".": "./dist/index.js",
+    "./bundle": "./dist/outline-core-link.js"
   },
   "devDependencies": {
     "@phase2/outline-adopted-stylesheets-controller": "^1.0.2",
-    "@phase2/outline-core": "^0.2.7"
+    "vite": "^5.1.4"
   }
 }
diff --git a/packages/components/outline-core-link/src/outline-core-link.ts b/packages/components/outline-core-link/src/outline-core-link.ts
@@ -1,9 +1,7 @@
-import { html, TemplateResult } from 'lit';
+import { html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-// Our base component, which all others extend.
-import { OutlineElement } from '@phase2/outline-core';
 import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller';
 import encapsulatedStyles from './style/outline-core-link.encapsulated.css?inline';
 import globalStyles from './style/outline-core-link.global.css?inline';
@@ -18,7 +16,7 @@ const componentName = 'outline-core-link';
  * The Outline Core Link component
  *
  * @element outline-core-link
- * @extends OutlineElement
+ * @extends LitElement
  * @since 0.0.1
  *
  * @slot - The default slot for this element.
@@ -33,13 +31,16 @@ const componentName = 'outline-core-link';
  * @todo - Add support for outline/ring on the focus state of the link.
  */
 @customElement(componentName)
-export class OutlineCoreLink extends OutlineElement {
+export class OutlineCoreLink extends LitElement {
   // static styles: CSSResultGroup = [encapsulatedStyles];
   GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets(
     this,
     globalStyles,
     document
   );
+
+  EncapsulatedStylesheets: AdoptedStylesheets | undefined;
+
   debug = false;
 
   /**

diff --git a/packages/components/outline-core-link/tsconfig.build.json b/packages/components/outline-core-link/tsconfig.build.json
@@ -1,9 +1,8 @@
 {
-  "extends": "../../../tsconfig.json",
+  "extends": "../../../tsconfig.build.json",
   "compilerOptions": {
     "rootDir": ".",
     "outDir": "./dist"
   },
-  "include": ["index.ts", "src/**/*", "tests/**/*"],
-  "references": [{ "path": "../../outline-core/tsconfig.build.json" }]
+  "include": ["index.ts", "src/**/*", "tests/**/*", "../../env.d.ts"]
 }
diff --git a/packages/components/outline-core-link/vite.config.js b/packages/components/outline-core-link/vite.config.js
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import baseConfig from '../../../vite.config.js';
+
+export default defineConfig({
+  ...baseConfig,
+  build: {
+    ...baseConfig.build,
+    lib: {
+      ...baseConfig.build.lib,
+      entry: 'index.ts',
+      fileName: format => `outline-core-link.js`,
+    },
+    rollupOptions: {
+      ...baseConfig.build.rollupOptions,
+    },
+  },
+});