chore: update ui dependencies (holochain#407)

* Bump holochain playground * Update ui core dependencies * Update lit dependencies * Fix cli output lines * Fix broken css import in lit template * Revert custom-template changes * Fix vue templates * Increase testTimeout * Remove eslint from lit template * Fix lit CI failure * Add missing shared styles
c12i · Oct 31, 2024 · f838294 · f838294
1 parent 0fc4003
commit f838294
Show file tree

Hide file tree

Showing 51 changed files with 191 additions and 201 deletions.
diff --git a/src/cli/collection.rs b/src/cli/collection.rs
@@ -91,10 +91,10 @@ impl Collection {
             );
         }
 
-        println!("\nCollection {} scaffolded!", name.italic());
+        println!("\nCollection {} scaffolded!\n", name.italic());
 
         if let Some(i) = next_instructions {
-            println!("\n{}", i);
+            println!("{}", i);
         }
 
         Ok(())

diff --git a/src/cli/dna.rs b/src/cli/dna.rs
@@ -51,7 +51,8 @@ impl Dna {
                 r#"
 Add new zomes to your DNA with:
 
-  hc scaffold zome"#,
+  hc scaffold zome
+                "#,
             );
         }
 

diff --git a/src/cli/entry_type.rs b/src/cli/entry_type.rs
@@ -110,7 +110,8 @@ impl EntryType {
                 r#"
 Add new collections for that entry type with:
 
-  hc scaffold collection"#,
+  hc scaffold collection
+                "#,
             );
         }
 

diff --git a/src/cli/example.rs b/src/cli/example.rs
@@ -296,10 +296,10 @@ impl Example {
 
         setup_git_environment(&app_dir)?;
 
-        println!("\nExample {} scaffolded!", example.to_string().italic());
+        println!("\nExample {} scaffolded!\n", example.to_string().italic());
 
         if let Some(i) = next_instructions {
-            println!("\n{}", i);
+            println!("{}", i);
         }
 
         Ok(())

diff --git a/src/cli/link_type.rs b/src/cli/link_type.rs
@@ -82,9 +82,9 @@ impl LinkType {
             );
         }
 
-        println!("\nLink type scaffolded!");
+        println!("\nLink type scaffolded!\n");
         if let Some(i) = next_instructions {
-            println!("\n{}", i);
+            println!("{}", i);
         }
 
         Ok(())

diff --git a/src/cli/web_app.rs b/src/cli/web_app.rs
@@ -113,7 +113,7 @@ impl WebApp {
             nix_instructions = "\n  nix develop";
         }
 
-        println!("Your Web hApp {} has been scaffolded!", name.italic());
+        println!("Your Web hApp {} has been scaffolded!\n", name.italic());
 
         let mut disable_fast_track = self.disable_fast_track;
 
@@ -128,11 +128,10 @@ impl WebApp {
         setup_git_environment(&app_folder)?;
 
         if let Some(instructions) = next_instructions {
-            println!("\n{instructions}");
+            println!("{instructions}");
         } else {
             let dna_instructions = disable_fast_track.then_some(
                 r#"
-
 - Get your project to compile by adding a DNA and then following the next insturctions to add a zome to that DNA:
 
   hc scaffold dna"#).unwrap_or_default();
@@ -154,7 +153,8 @@ Here's how you can get started with developing your application:
 
 - Then, at any point in time you can start your application with:
 
-  {}"#,
+  {}
+                "#,
                 package_manager.run_command_string(SubCommand::Install, None),
                 package_manager.run_command_string(SubCommand::Run("start".to_string()), None)
             );

diff --git a/src/cli/zome.rs b/src/cli/zome.rs
@@ -90,7 +90,7 @@ impl Zome {
             zome_next_instructions.0 = next_instructions;
 
             println!(
-                "\nIntegrity zome {} scaffolded!",
+                "Integrity zome {} scaffolded!\n",
                 integrity_zome_name.italic(),
             );
 
@@ -120,7 +120,7 @@ impl Zome {
             )?;
             zome_next_instructions.1 = next_instructions;
 
-            println!("\nCoordinator zome {} scaffolded!", name.italic());
+            println!("Coordinator zome {} scaffolded!\n", name.italic());
 
             dna_file_tree = DnaFileTree::from_dna_manifest_path(file_tree, &dna_manifest_path)?;
         }

diff --git a/templates/generic/web-app/package.json.hbs b/templates/generic/web-app/package.json.hbs
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@holochain-playground/cli": "{{holochain_playground_cli_version}}",
     "@holochain/hc-spin": "{{hc_spin_version}}",
-    "concurrently": "^6.2.1",
+    "concurrently": "^6.5.1",
   {{#if holo_enabled}}
     "concurrently-repeat": "^0.0.1",
   {{/if}}
@@ -37,4 +37,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}
diff --git a/templates/generic/web-app/tests/vitest.config.ts.hbs b/templates/generic/web-app/tests/vitest.config.ts.hbs
@@ -3,6 +3,6 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
   test: {
     threads: false,
-    testTimeout: 60*1000*3 // 3  mins
+    testTimeout: 60*1000*4 // 4  mins
   },
-})
+})
diff --git a/templates/ui-frameworks/lit/collection.instructions.hbs b/templates/ui-frameworks/lit/collection.instructions.hbs
@@ -1,2 +1,2 @@
 If you want the newly scaffolded collection's component to be the entry point for its UI, import the
-generated <{{kebab_case collection_name}}></{{kebab_case collection_name}}> component.
+generated <{{kebab_case collection_name}}></{{kebab_case collection_name}}> component.
diff --git a/...{dna_role_name}}/{{coordinator_zome_manifest.name}}/{{kebab_case collection_name}}.ts.hbs b/...{dna_role_name}}/{{coordinator_zome_manifest.name}}/{{kebab_case collection_name}}.ts.hbs
@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { state, customElement, property } from 'lit/decorators.js';
 import { AppClient, AgentPubKey, Link, EntryHash, ActionHash, Record, NewEntryAction, SignalType } from '@holochain/client';
-import { consume } from '@lit-labs/context';
-import { Task } from '@lit-labs/task';
+import { consume } from '@lit/context';
+import { Task } from '@lit/task';
 
 import { sharedStyles } from '../../shared-styles';
 import { clientContext } from '../../contexts';
@@ -77,4 +77,4 @@ export class {{pascal_case collection_name}} extends LitElement {
   }
 
   static styles = sharedStyles;
-}
+}
diff --git a/...le_name}}/{{coordinator_zome_manifest.name}}/create-{{kebab_case entry_type.name}}.ts.hbs b/...le_name}}/{{coordinator_zome_manifest.name}}/create-{{kebab_case entry_type.name}}.ts.hbs
@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { state, customElement, property } from 'lit/decorators.js';
 import { InstalledCell, ActionHash, Record, AgentPubKey, EntryHash, AppClient, DnaHash, HolochainError } from '@holochain/client';
-import { consume } from '@lit-labs/context';
+import { consume } from '@lit/context';
 {{#uniq_lines}}
   {{#each entry_type.fields}}
     {{#if widget}}

diff --git a/... (plural ..¡entry_type.name)}}-for-{{kebab_case linked_from.name}}.ts{{¡if}}{{¡each}}.hbs b/... (plural ..¡entry_type.name)}}-for-{{kebab_case linked_from.name}}.ts{{¡if}}{{¡each}}.hbs
@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { state, customElement, property } from 'lit/decorators.js';
 import { InstalledCell, Record, Link, AppClient, EntryHash, ActionHash, AgentPubKey, SignalType } from '@holochain/client';
-import { consume } from '@lit-labs/context';
-import { Task } from '@lit-labs/task';
+import { consume } from '@lit/context';
+import { Task } from '@lit/task';
 
 import { sharedStyles } from '../../shared-styles';
 import { clientContext } from '../../contexts';

diff --git a/...zome_manifest.name}}/{{#if crud.update}}edit-{{kebab_case entry_type.name}}.ts{{¡if}}.hbs b/...zome_manifest.name}}/{{#if crud.update}}edit-{{kebab_case entry_type.name}}.ts{{¡if}}.hbs
@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { state, customElement, property } from 'lit/decorators.js';
 import { ActionHash, EntryHash, AgentPubKey, Record, AppClient, DnaHash, HolochainError } from '@holochain/client';
-import { consume } from '@lit-labs/context';
+import { consume } from '@lit/context';
 import { decode } from '@msgpack/msgpack';
 {{#uniq_lines}}
   {{#each entry_type.fields}}
@@ -157,4 +157,4 @@ export class Edit{{pascal_case entry_type.name}} extends LitElement {
   }
 
   static styles = sharedStyles;
-}
+}
diff --git a/...le_name}}/{{coordinator_zome_manifest.name}}/{{kebab_case entry_type.name}}-detail.ts.hbs b/...le_name}}/{{coordinator_zome_manifest.name}}/{{kebab_case entry_type.name}}-detail.ts.hbs
@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { state, customElement, property } from 'lit/decorators.js';
 import { EntryHash, Record, ActionHash, AppClient, DnaHash, HolochainError } from '@holochain/client';
-import { consume } from '@lit-labs/context';
-import { Task } from '@lit-labs/task';
+import { consume } from '@lit/context';
+import { Task } from '@lit/task';
 import { decode } from '@msgpack/msgpack';
 {{#uniq_lines}}
   {{#each entry_type.fields}}

diff --git a/templates/ui-frameworks/lit/example.instructions.hbs b/templates/ui-frameworks/lit/example.instructions.hbs
@@ -7,4 +7,4 @@ Run the example app with:
 
 Generated ui code might also need to be reformatted:
 
-  {{(package_manager_command package_manager "format" "ui")}}
+  {{(package_manager_command package_manager "format" "ui")}}
diff --git a/templates/ui-frameworks/lit/example/ui/src/holochain-app.ts.hbs b/templates/ui-frameworks/lit/example/ui/src/holochain-app.ts.hbs
@@ -1,9 +1,9 @@
-import { LitElement, html, css, unsafeCSS } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { AppClient, AppWebsocket } from '@holochain/client';
-import { provide } from '@lit-labs/context';
+import { provide } from '@lit/context';
 
-import sharedStyles from './index.css';
+import { sharedStyles } from './shared-styles';
 import { clientContext } from './contexts';
 
 import './forum/posts/all-posts';
@@ -39,5 +39,5 @@ export class HolochainApp extends LitElement {
     `;
   }
 
-  static styles = css`${unsafeCSS(sharedStyles)}`;
+  static styles = sharedStyles;
 }
diff --git a/...(plural from_referenceable.name)}}-for-{{kebab_case to_referenceable.name}}.ts{{¡if}}.hbs b/...(plural from_referenceable.name)}}-for-{{kebab_case to_referenceable.name}}.ts{{¡if}}.hbs
@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { state, property, customElement } from 'lit/decorators.js';
 import { AgentPubKey, Link, EntryHash, ActionHash, Record, AppClient, NewEntryAction, SignalType } from '@holochain/client';
-import { consume } from '@lit-labs/context';
-import { Task } from '@lit-labs/task';
+import { consume } from '@lit/context';
+import { Task } from '@lit/task';
 
 import { sharedStyles } from '../../shared-styles';
 import { clientContext } from '../../contexts';
@@ -68,4 +68,4 @@ export class {{pascal_case (plural from_referenceable.name)}}For{{pascal_case to
   }
 
   static styles = sharedStyles;
-}
+}
diff --git a/...(plural to_referenceable.name)}}-for-{{kebab_case from_referenceable.name}}.ts{{¡if}}.hbs b/...(plural to_referenceable.name)}}-for-{{kebab_case from_referenceable.name}}.ts{{¡if}}.hbs
@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { state, property, customElement } from 'lit/decorators.js';
 import { AgentPubKey, Link, EntryHash, ActionHash, Record, AppClient, NewEntryAction, SignalType } from '@holochain/client';
-import { consume } from '@lit-labs/context';
-import { Task } from '@lit-labs/task';
+import { consume } from '@lit/context';
+import { Task } from '@lit/task';
 
 import { sharedStyles } from '../../shared-styles';
 import { clientContext } from '../../contexts';

diff --git a/templates/ui-frameworks/lit/web-app/ui/index.html.hbs b/templates/ui-frameworks/lit/web-app/ui/index.html.hbs
@@ -9,9 +9,10 @@
     <meta name="Description" content="Put your description here." />
     <base href="/" />
     <title>{{title_case app_name}}</title>
+    <link rel="stylesheet" href="./src/index.css" />
   </head>
   <body>
     <holochain-app></holochain-app>
     <script type="module" src="./src/holochain-app.ts"></script>
   </body>
-</html>
+</html>
diff --git a/templates/ui-frameworks/lit/web-app/ui/package.json.hbs b/templates/ui-frameworks/lit/web-app/ui/package.json.hbs
@@ -8,67 +8,31 @@
     "build:holo": "VITE_APP_IS_HOLO=true vite build",
     "package:holo": "{{(package_manager_command package_manager "build:holo" null)}} && rimraf dist.zip && cd dist && bestzip ../dist.zip *",
   {{/if}}
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "format": "prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "package": "{{(package_manager_command package_manager "build" null)}} && rimraf dist.zip && cd dist && bestzip ../dist.zip *"
   },
   "dependencies": {
     "@holochain/client": "{{holochain_client_version}}",
   {{#if holo_enabled}}
     "@holo-host/web-sdk": "{{holo_web_sdk_version}}",
   {{/if}}
-    "@lit-labs/context": "^0.2.0",
-    "@lit-labs/task": "^2.0.0",
+    "@lit/context": "^1.1.3",
+    "@lit/task": "^1.0.1",
     "@msgpack/msgpack": "^2.8.0",
-    "lit": "^2.6.1"
+    "lit": "^3.2.1"
   },
   "devDependencies": {
-    "@open-wc/eslint-config": "^4.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "bestzip": "^2.2.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "prettier": "^2.3.2",
-    "rimraf": "^5.0.7",
-    "vite": "^4.0.0",
-    "vite-plugin-checker": "^0.5.3",
-    "typescript": "^4.5.5",
-    "tslib": "^2.6.3"
-  },
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "wc/guard-super-call": "off",
-      "prefer-destructuring": "off",
-      "no-useless-constructor": "off",
-      "no-empty-function": "off",
-      "no-nested-ternary": "off",
-      "no-empty-pattern": "off",
-      "no-console": "off",
-      "no-alert": "off",
-      "no-param-reassign": "off",
-      "camelcase": "off",
-      "import/no-duplicates": "off",
-      "no-unused-vars": "off",
-      "class-methods-use-this": "off",
-      "@typescript-eslint/no-unused-vars": "off",
-      "import/no-unresolved": "off",
-      "import/extensions": "off",
-      "no-use-before-define": "off",
-      "lines-between-class-members": "off"
-    }
+    "bestzip": "^2.2.1",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.10",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-checker": "^0.5.6"
   },
   "prettier": {
     "singleQuote": true,
     "arrowParens": "avoid"
   },
   "type": "module"
-}
+}
diff --git a/templates/ui-frameworks/lit/web-app/ui/src/contexts.ts.hbs b/templates/ui-frameworks/lit/web-app/ui/src/contexts.ts.hbs
@@ -1,4 +1,4 @@
-import { createContext } from '@lit-labs/context';
+import { createContext } from '@lit/context';
 import { AppClient } from '@holochain/client';
 
 export const clientContext = createContext<AppClient>('AppClient');
diff --git a/templates/ui-frameworks/lit/web-app/ui/src/declarations.d.ts.hbs b/templates/ui-frameworks/lit/web-app/ui/src/declarations.d.ts.hbs
@@ -3,7 +3,7 @@ declare module '*.svg' {
   export default content;
 }
 
-declare module '*.css' {
+declare module '*.css?inline' {
   const content: string;
   export default content;
 }
diff --git a/templates/ui-frameworks/lit/web-app/ui/src/holochain-app.ts.hbs b/templates/ui-frameworks/lit/web-app/ui/src/holochain-app.ts.hbs
@@ -5,7 +5,7 @@ import { AppWebsocket, ActionHash, AppClient, HolochainError } from '@holochain/
 import WebSdk from '@holo-host/web-sdk'
 import type { AgentState } from '@holo-host/web-sdk';
 {{/if}}
-import { provide } from '@lit-labs/context';
+import { provide } from '@lit/context';
 
 import { sharedStyles } from './shared-styles';
 import HolochainLogo from "./assets/holochainLogo.svg";

diff --git a/templates/ui-frameworks/lit/web-app/ui/src/shared-styles.ts.hbs b/templates/ui-frameworks/lit/web-app/ui/src/shared-styles.ts.hbs
@@ -1,4 +1,4 @@
 import { css, unsafeCSS } from 'lit';
-import styles from './index.css';
+import styles from './index.css?inline';
 
 export const sharedStyles = css`${unsafeCSS(styles)}`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,8 @@ impl Dna { @@
                     r#"
     Add new zomes to your DNA with:
-      hc scaffold zome"#,
+      hc scaffold zome
+                    "#,
                 );
             }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,4 @@ Run the example app with:

		Generated ui code might also need to be reformatted:

		{{(package_manager_command package_manager "format" "ui")}}
		{{(package_manager_command package_manager "format" "ui")}}