v0.12.0

CHANGELOG.md

@@ -9,6 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Selectable/expandable `DataTable`
 
+## [0.12.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.12.0) - 2020-09-13
+
+**Features**
+
+- css: ship precompiled CSS StyleSheets for each Carbon theme (70e0875)
+
+**Documentation**
+
+- examples: add example set-ups using popular bundlers/frameworks
+- update README guidance on consuming the library
+
 ## [0.11.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.11.0) - 2020-09-05
 
 **Features**
@@ -21,7 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - UI Shell: add Close/AppSwitcher as default icons for `HeaderAction` component (5f62cde)
 - ButtonSet: add `stacked` prop (c8e0a59)
-- Link: set `rel` attribute to "noopener noreferrer" if `target` is "_blank" (4b7d254)
+- Link: set `rel` attribute to "noopener noreferrer" if `target` is "\_blank" (4b7d254)
 
 **Fixes**
 
@@ -123,7 +134,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.8.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.0) - 2020-07-19
 
-- use $$restProps API (requires Svelte version >=3.20)
+- use \$\$restProps API (requires Svelte version >=3.20)
 - upgrade `carbon-icons-svelte` to version >=10.13.0
 - use svelte class:{value} API instead of `cx`
 - add ref prop to "interactive" components like text inputs, anchor links... ([Issue #196](https://github.com/IBM/carbon-components-svelte/issues/196))

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 144 components exported from carbon-components-svelte 0.11.0
+> 144 components exported from carbon-components-svelte 0.12.0
 
 - Accordion
   - [AccordionSkeleton](#accordionskeleton)

README.md

@@ -21,12 +21,12 @@ The quickest way to get started is to customize a template from the [examples](e
 
 Example set-ups demonstrate usage with popular application bundlers and frameworks. They feature a mix of Singe-page Applications (SPA), Server-side rendering (SSR) and statically exported approaches.
 
-- **[rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
+- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
-- **[rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
+- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
-- **[routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
+- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
-- **[sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
+- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
-- **[svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
+- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
-- **[webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
+- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
 
 ### Scaffolding
 

docs/README.md

@@ -78,4 +78,4 @@ Build and deploy the app:
 yarn build
 ibmcloud target --cf
 ibmcloud cf push
-```
+```

docs/cypress/integration/Button.js

@@ -4,10 +4,7 @@ describe("Button", () => {
   });
 
   it("clicks", () => {
-    cy.get(".bx--btn--primary")
+    cy.get(".bx--btn--primary").first().as("btn").contains("Primary button");
-      .first()
-      .as("btn")
-      .contains("Primary button");
 
     cy.get("@btn").trigger("click");
     cy.get("@log").should("be.calledWith", "click");

docs/cypress/plugins/index.js

@@ -18,4 +18,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

docs/src/service-worker.js

@@ -1,4 +1,4 @@
-import { timestamp, files, shell, routes } from '@sapper/service-worker';
+import { timestamp, files, shell, routes } from "@sapper/service-worker";
 
 const ASSETS = `cache${timestamp}`;
 
@@ -7,76 +7,79 @@ const ASSETS = `cache${timestamp}`;
 const to_cache = shell.concat(files);
 const cached = new Set(to_cache);
 
-self.addEventListener('install', event => {
+self.addEventListener("install", (event) => {
-	event.waitUntil(
+  event.waitUntil(
-		caches
+    caches
-			.open(ASSETS)
+      .open(ASSETS)
-			.then(cache => cache.addAll(to_cache))
+      .then((cache) => cache.addAll(to_cache))
-			.then(() => {
+      .then(() => {
-				self.skipWaiting();
+        self.skipWaiting();
-			})
+      })
-	);
+  );
 });
 
-self.addEventListener('activate', event => {
+self.addEventListener("activate", (event) => {
-	event.waitUntil(
+  event.waitUntil(
-		caches.keys().then(async keys => {
+    caches.keys().then(async (keys) => {
-			// delete old caches
+      // delete old caches
-			for (const key of keys) {
+      for (const key of keys) {
-				if (key !== ASSETS) await caches.delete(key);
+        if (key !== ASSETS) await caches.delete(key);
-			}
+      }
 
-			self.clients.claim();
+      self.clients.claim();
-		})
+    })
-	);
+  );
 });
 
-self.addEventListener('fetch', event => {
+self.addEventListener("fetch", (event) => {
-	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+  if (event.request.method !== "GET" || event.request.headers.has("range"))
+    return;
 
-	const url = new URL(event.request.url);
+  const url = new URL(event.request.url);
 
-	// don't try to handle e.g. data: URIs
+  // don't try to handle e.g. data: URIs
-	if (!url.protocol.startsWith('http')) return;
+  if (!url.protocol.startsWith("http")) return;
 
-	// ignore dev server requests
+  // ignore dev server requests
-	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+  if (
+    url.hostname === self.location.hostname &&
+    url.port !== self.location.port
+  )
+    return;
 
-	// always serve static files and bundler-generated assets from cache
+  // always serve static files and bundler-generated assets from cache
-	if (url.host === self.location.host && cached.has(url.pathname)) {
+  if (url.host === self.location.host && cached.has(url.pathname)) {
-		event.respondWith(caches.match(event.request));
+    event.respondWith(caches.match(event.request));
-		return;
+    return;
-	}
+  }
 
-	// for pages, you might want to serve a shell `service-worker-index.html` file,
+  // for pages, you might want to serve a shell `service-worker-index.html` file,
-	// which Sapper has generated for you. It's not right for every
+  // which Sapper has generated for you. It's not right for every
-	// app, but if it's right for yours then uncomment this section
+  // app, but if it's right for yours then uncomment this section
-	/*
+  /*
 	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
 		event.respondWith(caches.match('/service-worker-index.html'));
 		return;
 	}
 	*/
 
-	if (event.request.cache === 'only-if-cached') return;
+  if (event.request.cache === "only-if-cached") return;
 
-	// for everything else, try the network first, falling back to
+  // for everything else, try the network first, falling back to
-	// cache if the user is offline. (If the pages never change, you
+  // cache if the user is offline. (If the pages never change, you
-	// might prefer a cache-first approach to a network-first one.)
+  // might prefer a cache-first approach to a network-first one.)
-	event.respondWith(
+  event.respondWith(
-		caches
+    caches.open(`offline${timestamp}`).then(async (cache) => {
-			.open(`offline${timestamp}`)
+      try {
-			.then(async cache => {
+        const response = await fetch(event.request);
-				try {
+        cache.put(event.request, response.clone());
-					const response = await fetch(event.request);
+        return response;
-					cache.put(event.request, response.clone());
+      } catch (err) {
-					return response;
+        const response = await cache.match(event.request);
-				} catch(err) {
+        if (response) return response;
-					const response = await cache.match(event.request);
-					if (response) return response;
 
-					throw err;
+        throw err;
-				}
+      }
-			})
+    })
-	);
+  );
 });

examples/rollup-typescript/README.md

@@ -20,4 +20,4 @@ Starts the app in development mode.
 
 ### `yarn build`
 
-Builds the app for production.
+Builds the app for production.

examples/rollup/README.md

@@ -20,4 +20,4 @@ Starts the app in development mode.
 
 ### `yarn build`
 
-Builds the app for production.
+Builds the app for production.

examples/routify/README.md

@@ -20,4 +20,4 @@ Starts the app in development mode.
 
 ### `yarn build`
 
-Builds the app for production.
+Builds the app for production.

examples/sapper/README.md

@@ -29,5 +29,3 @@ Builds the app for production and statically exports the app.
 ### `yarn start`
 
 Runs the app in production (`yarn build` must be run first).
-
-

examples/sapper/src/service-worker.js

@@ -1,4 +1,4 @@
-import { timestamp, files, shell, routes } from '@sapper/service-worker';
+import { timestamp, files, shell, routes } from "@sapper/service-worker";
 
 const ASSETS = `cache${timestamp}`;
 
@@ -7,76 +7,79 @@ const ASSETS = `cache${timestamp}`;
 const to_cache = shell.concat(files);
 const cached = new Set(to_cache);
 
-self.addEventListener('install', event => {
+self.addEventListener("install", (event) => {
-	event.waitUntil(
+  event.waitUntil(
-		caches
+    caches
-			.open(ASSETS)
+      .open(ASSETS)
-			.then(cache => cache.addAll(to_cache))
+      .then((cache) => cache.addAll(to_cache))
-			.then(() => {
+      .then(() => {
-				self.skipWaiting();
+        self.skipWaiting();
-			})
+      })
-	);
+  );
 });
 
-self.addEventListener('activate', event => {
+self.addEventListener("activate", (event) => {
-	event.waitUntil(
+  event.waitUntil(
-		caches.keys().then(async keys => {
+    caches.keys().then(async (keys) => {
-			// delete old caches
+      // delete old caches
-			for (const key of keys) {
+      for (const key of keys) {
-				if (key !== ASSETS) await caches.delete(key);
+        if (key !== ASSETS) await caches.delete(key);
-			}
+      }
 
-			self.clients.claim();
+      self.clients.claim();
-		})
+    })
-	);
+  );
 });
 
-self.addEventListener('fetch', event => {
+self.addEventListener("fetch", (event) => {
-	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+  if (event.request.method !== "GET" || event.request.headers.has("range"))
+    return;
 
-	const url = new URL(event.request.url);
+  const url = new URL(event.request.url);
 
-	// don't try to handle e.g. data: URIs
+  // don't try to handle e.g. data: URIs
-	if (!url.protocol.startsWith('http')) return;
+  if (!url.protocol.startsWith("http")) return;
 
-	// ignore dev server requests
+  // ignore dev server requests
-	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+  if (
+    url.hostname === self.location.hostname &&
+    url.port !== self.location.port
+  )
+    return;
 
-	// always serve static files and bundler-generated assets from cache
+  // always serve static files and bundler-generated assets from cache
-	if (url.host === self.location.host && cached.has(url.pathname)) {
+  if (url.host === self.location.host && cached.has(url.pathname)) {
-		event.respondWith(caches.match(event.request));
+    event.respondWith(caches.match(event.request));
-		return;
+    return;
-	}
+  }
 
-	// for pages, you might want to serve a shell `service-worker-index.html` file,
+  // for pages, you might want to serve a shell `service-worker-index.html` file,
-	// which Sapper has generated for you. It's not right for every
+  // which Sapper has generated for you. It's not right for every
-	// app, but if it's right for yours then uncomment this section
+  // app, but if it's right for yours then uncomment this section
-	/*
+  /*
 	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
 		event.respondWith(caches.match('/service-worker-index.html'));
 		return;
 	}
 	*/
 
-	if (event.request.cache === 'only-if-cached') return;
+  if (event.request.cache === "only-if-cached") return;
 
-	// for everything else, try the network first, falling back to
+  // for everything else, try the network first, falling back to
-	// cache if the user is offline. (If the pages never change, you
+  // cache if the user is offline. (If the pages never change, you
-	// might prefer a cache-first approach to a network-first one.)
+  // might prefer a cache-first approach to a network-first one.)
-	event.respondWith(
+  event.respondWith(
-		caches
+    caches.open(`offline${timestamp}`).then(async (cache) => {
-			.open(`offline${timestamp}`)
+      try {
-			.then(async cache => {
+        const response = await fetch(event.request);
-				try {
+        cache.put(event.request, response.clone());
-					const response = await fetch(event.request);
+        return response;
-					cache.put(event.request, response.clone());
+      } catch (err) {
-					return response;
+        const response = await cache.match(event.request);
-				} catch(err) {
+        if (response) return response;
-					const response = await cache.match(event.request);
-					if (response) return response;
 
-					throw err;
+        throw err;
-				}
+      }
-			})
+    })
-	);
+  );
 });

examples/webpack/README.md

@@ -20,4 +20,4 @@ Starts the app in development mode.
 
 ### `yarn build`
 
-Builds the app for production.
+Builds the app for production.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "svelte": "./src/index.js",

src/UIShell/searchStore.js

@@ -1,41 +1,41 @@
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
 
 const data = [
   {
-    href: '#',
+    href: "#",
-    title: 'Test title search 1',
+    title: "Test title search 1",
-    menu: 'Test menu 1',
+    menu: "Test menu 1",
-    description: 'This is a description for seach #1'
+    description: "This is a description for seach #1",
   },
   {
-    href: '#',
+    href: "#",
-    title: 'Changing text to simulate search',
+    title: "Changing text to simulate search",
-    menu: 'Test menu 2',
+    menu: "Test menu 2",
-    description: 'This is a description for seach #2'
+    description: "This is a description for seach #2",
   },
   {
-    href: '#',
+    href: "#",
-    title: 'More testing texts',
+    title: "More testing texts",
-    menu: 'Test menu 3',
+    menu: "Test menu 3",
-    description: 'This is a description for seach #3'
+    description: "This is a description for seach #3",
   },
   {
-    href: '#',
+    href: "#",
-    title: 'We can find here another test text',
+    title: "We can find here another test text",
-    menu: 'Test menu 4',
+    menu: "Test menu 4",
-    description: 'This is a description for seach #4'
+    description: "This is a description for seach #4",
-  }
+  },
 ];
 
 const globalStore = writable(undefined);
 
 const store = {
   subscribe: globalStore.subscribe,
-  search: searchString => {
+  search: (searchString) => {
     if (searchString.length > 1) {
       let resultSearch = [];
 
-      data.forEach(item => {
+      data.forEach((item) => {
         if (item.title.toLowerCase().includes(searchString.toLowerCase())) {
           resultSearch.push(item);
         }
@@ -52,7 +52,7 @@ const store = {
   },
   clear: () => {
     globalStore.set(undefined);
-  }
+  },
 };
 
 export default store;

types/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for carbon-components-svelte 0.11.0
+// Type definitions for carbon-components-svelte 0.12.0
 // Project: https://github.com/IBM/carbon-components-svelte
 
 export class CarbonSvelteComponent {
@@ -1484,7 +1484,7 @@ export class Grid extends CarbonSvelteComponent {
     noGutterRight?: boolean;
   };
 
-  $$slot_def: { default: { } };
+  $$slot_def: { default: {} };
 }
 
 export class Header extends CarbonSvelteComponent {