@adobe/create-ccweb-add-on 2.4.2 → 3.0.0

package/dist/templates/react-typescript/template/src/components/App.tsx

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -22,7 +22,7 @@ const App = ({ addOnUISdk }: { addOnUISdk: AddOnSDKAPI }) => {
     return (
         // Please note that the below "<Theme>" component does not react to theme changes in Express.
         // You may use "addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        <Theme theme="express" scale="medium" color="light">
+        <Theme system="express" scale="medium" color="light">
             <div className="container">
                 <Button size="m" onClick={handleClick}>
                     {buttonLabel}

package/dist/templates/react-typescript/template/webpack.config.js

@@ -12,6 +12,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "index.js"

package/dist/templates/react-typescript/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@swc-react/button": "0.39.4",
-        "@swc-react/theme": "0.39.4",
+        "@swc-react/button": "1.0.3",
+        "@swc-react/theme": "1.0.3",
         "react-dom": "18.2.0",
         "react": "18.2.0"
     },
@@ -20,7 +20,7 @@
         "style-loader": "3.3.3",
         "ts-loader": "9.5.1",
         "typescript": "5.3.2",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/dist/templates/react-typescript-with-document-sandbox/template/src/ui/components/App.tsx

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -21,7 +21,7 @@ const App = ({ addOnUISdk, sandboxProxy }: { addOnUISdk: AddOnSDKAPI; sandboxPro
     return (
         // Please note that the below "<Theme>" component does not react to theme changes in Express.
         // You may use "addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        <Theme theme="express" scale="medium" color="light">
+        <Theme system="express" scale="medium" color="light">
             <div className="container">
                 <Button size="m" onClick={handleClick}>
                     Create Rectangle

package/dist/templates/react-typescript-with-document-sandbox/template/webpack.config.js

@@ -18,6 +18,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "[name].js"

package/dist/templates/react-typescript-with-document-sandbox/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@swc-react/button": "0.39.4",
-        "@swc-react/theme": "0.39.4",
+        "@swc-react/button": "1.0.3",
+        "@swc-react/theme": "1.0.3",
         "react-dom": "18.2.0",
         "react": "18.2.0"
     },
@@ -20,7 +20,7 @@
         "style-loader": "3.3.3",
         "ts-loader": "9.5.1",
         "typescript": "5.3.2",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/dist/templates/swc-javascript/template/src/components/App.js

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -33,7 +33,7 @@ export class App extends LitElement {
     render() {
         // Please note that the below "<sp-theme>" component does not react to theme changes in Express.
         // You may use "this.addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        return html` <sp-theme theme="express" color="light" scale="medium">
+        return html` <sp-theme system="express" color="light" scale="medium">
             <div class="container">
                 <sp-button size="m" @click=${this._handleClick}>${this._buttonLabel}</sp-button>
             </div>

package/dist/templates/swc-javascript/template/webpack.config.js

@@ -12,6 +12,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "index.js"

package/dist/templates/swc-javascript/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "0.39.4",
-        "@spectrum-web-components/theme": "0.39.4",
+        "@spectrum-web-components/button": "1.1.2",
+        "@spectrum-web-components/theme": "1.1.2",
         "lit": "2.8.0"
     },
     "devDependencies": {
@@ -18,7 +18,7 @@
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "style-loader": "3.3.3",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/dist/templates/swc-javascript-with-document-sandbox/template/src/ui/components/App.js

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -45,7 +45,7 @@ export class App extends LitElement {
     render() {
         // Please note that the below "<sp-theme>" component does not react to theme changes in Express.
         // You may use "this.addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        return html` <sp-theme theme="express" color="light" scale="medium">
+        return html` <sp-theme system="express" color="light" scale="medium">
             <div class="container">
                 <sp-button size="m" @click=${this._handleClick}>Create Rectangle</sp-button>
             </div>

package/dist/templates/swc-javascript-with-document-sandbox/template/webpack.config.js

@@ -15,6 +15,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "[name].js"

package/dist/templates/swc-javascript-with-document-sandbox/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "0.39.4",
-        "@spectrum-web-components/theme": "0.39.4",
+        "@spectrum-web-components/button": "1.1.2",
+        "@spectrum-web-components/theme": "1.1.2",
         "lit": "2.8.0"
     },
     "devDependencies": {
@@ -18,7 +18,7 @@
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "style-loader": "3.3.3",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/dist/templates/swc-typescript/template/src/components/App.css.ts

@@ -1,6 +1,6 @@
-import { css } from "lit";
+import { type CSSResult, css } from "lit";
 
-export const style = css`
+export const style: CSSResult = css`
     .container {
         margin: 24px;
         display: flex;

package/dist/templates/swc-typescript/template/src/components/App.ts

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -10,7 +10,7 @@ import "@spectrum-web-components/theme/theme-light.js";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/theme/sp-theme.js";
 
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { style } from "./App.css";
 
@@ -32,10 +32,10 @@ export class App extends LitElement {
         this._buttonLabel = "Clicked";
     }
 
-    render() {
+    render(): TemplateResult {
         // Please note that the below "<sp-theme>" component does not react to theme changes in Express.
         // You may use "this.addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        return html` <sp-theme theme="express" color="light" scale="medium">
+        return html` <sp-theme system="express" color="light" scale="medium">
             <div class="container">
                 <sp-button size="m" @click=${this._handleClick}>${this._buttonLabel}</sp-button>
             </div>

package/dist/templates/swc-typescript/template/src/index.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 import "./components/App";
@@ -10,7 +10,7 @@ export class Root extends LitElement {
     @state()
     private _isAddOnUISdkReady = addOnUISdk.ready;
 
-    render() {
+    render(): TemplateResult {
         return html`
             ${until(
                 this._isAddOnUISdkReady.then(() => {

package/dist/templates/swc-typescript/template/webpack.config.js

@@ -12,6 +12,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "index.js"

package/dist/templates/swc-typescript/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "0.39.4",
-        "@spectrum-web-components/theme": "0.39.4",
+        "@spectrum-web-components/button": "1.1.2",
+        "@spectrum-web-components/theme": "1.1.2",
         "lit": "2.8.0"
     },
     "devDependencies": {
@@ -17,7 +17,7 @@
         "style-loader": "3.3.3",
         "ts-loader": "9.5.1",
         "typescript": "5.3.2",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/dist/templates/swc-typescript-with-document-sandbox/template/src/ui/components/App.css.ts

@@ -1,6 +1,6 @@
-import { css } from "lit";
+import { type CSSResult, css } from "lit";
 
-export const style = css`
+export const style: CSSResult = css`
     .container {
         margin: 24px;
         display: flex;

package/dist/templates/swc-typescript-with-document-sandbox/template/src/ui/components/App.ts

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -10,7 +10,7 @@ import "@spectrum-web-components/theme/theme-light.js";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/theme/sp-theme.js";
 
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { DocumentSandboxApi } from "../../models/DocumentSandboxApi";
 import { style } from "./App.css";
@@ -43,10 +43,10 @@ export class App extends LitElement {
         this._sandboxProxy.createRectangle();
     }
 
-    render() {
+    render(): TemplateResult {
         // Please note that the below "<sp-theme>" component does not react to theme changes in Express.
         // You may use "this.addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        return html` <sp-theme theme="express" color="light" scale="medium">
+        return html` <sp-theme system="express" color="light" scale="medium">
             <div class="container">
                 <sp-button size="m" @click=${this._handleClick}>Create Rectangle</sp-button>
             </div>

package/dist/templates/swc-typescript-with-document-sandbox/template/src/ui/index.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 import "./components/App";
@@ -10,7 +10,7 @@ export class Root extends LitElement {
     @state()
     private _isAddOnUISdkReady = addOnUISdk.ready;
 
-    render() {
+    render(): TemplateResult {
         return html`
             ${until(
                 this._isAddOnUISdkReady.then(async () => {

package/dist/templates/swc-typescript-with-document-sandbox/template/webpack.config.js

@@ -18,6 +18,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "[name].js"

package/dist/templates/swc-typescript-with-document-sandbox/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "0.39.4",
-        "@spectrum-web-components/theme": "0.39.4",
+        "@spectrum-web-components/button": "1.1.2",
+        "@spectrum-web-components/theme": "1.1.2",
         "lit": "2.8.0"
     },
     "devDependencies": {
@@ -17,7 +17,7 @@
         "style-loader": "3.3.3",
         "ts-loader": "9.5.1",
         "typescript": "5.3.2",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }