Usage with SvelteKit #598

metonym · 2021-04-14T15:42:16Z

Update July 5, 2021

It is no longer necessary to instruct vite to optimize clipboard-copy as of carbon-components-svelte v0.39.

The clipboard-copy dependency has been removed (PR #726).

Instead, CodeSnippet and CopyButton use the native, asynchronous Clipboard API to copy text. The functionality is exported as a prop so the user can override the behavior as needed.

Note: the clipboard.writeText API is not supported in IE 11 nor Safari iOS version 13.3 or lower. caniuse estimates that ~91% of global users use a browser compatible with the API.

Overriding default copy behavior

Override the default functionality through the copy prop.

<script>
  import copy from "clipboard-copy";
  import { CopyButton } from "carbon-components-svelte";
</script>

<CopyButton text="hello" copy={text => copy(text)} />

Preventing default copy behavior

Pass a "no-op" empty function to prevent the component from copying text at all.

<script>
  import { CopyButton } from "carbon-components-svelte";
</script>

<CopyButton text="hello" copy={() => {}} />

A number of issues have been raised regarding using this library with SvelteKit. This is very important as it seems that SvelteKit will become the de facto framework for building SSR/SPA/static apps with Svelte.

Issues: #594
Refs:

Issues with using component libraries in sveltejs/kit sveltejs/kit#885 (comment)

Currently, this library has a dependency that does not support ESM (clipboard-copy).

Therefore, it must be manually added to the list of dependencies for vite to optimize:

// svelte.config.cjs
		vite: {
+			optimizeDeps: {
+				include: ['clipboard-copy']
+			},

This is not ideal because there shouldn't be an extra step to use the library.

Todo:

replace clipboard-copy with an ESM alternative
add documentation
add an SvelteKit set-up example

The text was updated successfully, but these errors were encountered:

jjonescz · 2021-04-15T10:50:45Z

I would also like to report that importing components like this:

import { Button } from 'carbon-components-svelte';

is much slower than like this:

import Button from 'carbon-components-svelte/src/Button/Button.svelte';

in SvelteKit during first load of svelte-kit dev. It's not so bad for components, but with carbon-icons-svelte, using the former method of importing is unfeasibly slow. It seems that Vite (which SvelteKit is using under the hood) is loading all icons when using the former approach instead of just the imported ones. (I am no expert on Vite so maybe there is some config option to avoid that?)

metonym · 2021-04-15T12:00:55Z

@jjonescz This was a huge issue for me as well, and the reason for the optimizeCarbonImports Svelte preprocessor.

The preprocessor will resolve the base import to the source Svelte file.

Before:
- import { Button } from "carbon-components-svelte";
- import { Notification20 } from "carbon-icons-svelte";

After:
+ import Button from "carbon-components-svelte/Button/Button.svelte";
+ import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";

This is better than the sub-folder import approach (i.e., carbon-components-svelte/Button) because it is less verbose and still retains autocomplete/typeahead benefits.

Usage

Like with any Svelte preprocessor, add it to the list of preprocessors in your Svelte config:

// svelte.config.js
const { optimizeCarbonImports } = require("carbon-components-svelte/preprocess");

module.exports = {
  preprocess: [optimizeCarbonImports()],
};

EDIT: If you're reading this, SvelteKit now uses ESM for the svelte.config.js file. I'd recommend using carbon-preprocess-svelte with SvelteKit going forward.

// svelte.config.js
import { optimizeImports } from "carbon-preprocess-svelte";

export default {
  preprocess: [optimizeImports()],
};

SarcevicAntonio · 2021-05-03T20:42:15Z

I came here because I wanted to raise an issue, but it seems related to this:

I'm using Svelte with Vite and Routify (so not SvelteKit) and importing the Tile Component caused a SyntaxError The requested module '/node_modules/clipbaord-copy/index.js?v=b84709f8' does not provide an export named 'default'. Using optimizeCarbonImports() fixed it for me, but maybe the OP solution could also work. I'll stick with optimizeCarbonImports for now, since it makes the code much nicer with the base imports.

Another thing that might be related somehow: Trying to load the theme using @import "carbon-components-svelte/css/all"; (without .css at the end) causes the first load of the page using Vite dev server to be unbearably slow. I'm using the precompiled .css version now, and it's much better. I can imagine this is also a weird quirk of using Vite with Carbon.

tradaonline · 2021-05-07T15:03:12Z

Any update on this? I really want to try Carbon with Sveltekit and i can wait for more documents and stable version.

arekbal · 2021-05-16T22:30:48Z

Got

ParseError: Unexpected token
  at error (/home/me/Projects/xx/node_modules/svelte/compiler.js:16752:20)
    at Parser$1.error (/home/me/Projects/xx/node_modules/svelte/compiler.js:16828:10)
    at Parser$1.acorn_error (/home/me/Projects/xx/node_modules/svelte/compiler.js:16822:15)
    at Object.read_script [as read] (/home/me/Projects/xx/node_modules/svelte/compiler.js:7501:17)
    at tag (/home/me/Projects/xx/node_modules/svelte/compiler.js:15887:34)
    at new Parser$1 (/home/me/Projects/xx/node_modules/svelte/compiler.js:16787:22)
    at parse$3 (/home/me/Projects/xx/node_modules/svelte/compiler.js:16919:21)
    at script (/home/me/Projects/xx/node_modules/carbon-components-svelte/preprocess/optimize-carbon-imports.js:46:19)
    at process_single_tag (/home/me/Projects/xx/node_modules/svelte/compiler.js:30241:34)
    at /home/me/Projects/xx/node_modules/svelte/compiler.js:30113:28

while trying sveltekit and optimizeCarbonImports. I have the optimizeDeps setup.

Why nobody in svelte tooling world prints what currently is being parsed and failed parsing/processing so we could even report it better is beyond me. 👀 😄

metonym · 2021-05-16T23:20:00Z

@arekbal Try optimizeImports from carbon-preprocess-svelte

geoidesic · 2021-06-14T09:00:55Z

Ho about creating a SvelteKit example in the README?

geoidesic · 2021-06-14T09:34:02Z

I can't get optimizeCarbonImports working in Sveltekit. For me it doesn't seem to do anything, i.e. I still get Failed to resolve import "carbon-components-svelte/Button/Button.svelte" even with this preprocessor installed and configured.

I also tried optimizeImports. Not sure if that's the reason but this format of import works and doesn't seem slow: import { Button } from 'carbon-components-svelte';

magick93 · 2021-06-18T22:50:34Z

I'm also trying to use Carbon with Sveltekit.

I've tried the following, in svelte.config.js without success.

// import { optimizeCarbonImports } from "carbon-components-svelte/preprocess"; //Cannot find package 'carbon-preprocess-svelte'

// const {
// 	optimizeCarbonImports,
//   } = require("carbon-components-svelte/preprocess"); //Cannot find package 'carbon-preprocess-svelte' 


import { optimizeImports } from "carbon-preprocess-svelte"; //Cannot find package 'carbon-preprocess-svelte'

metonym · 2021-06-18T23:41:16Z

@magick93 Do you have carbon-preprocess-svelte installed as a development dependency?

alpap · 2021-10-15T12:58:08Z

I have also an issue with it seems that vite cant find the icons

Failed to resolve import "carbon-icons-svelte/lib/Close20/Close20.svelte" from "node_modules/carbon-components-svelte/src/UIShell/SideNav/HamburgerMenu.svelte". Does the file exist?

while the carbon-icons-svelte is installed

metonym · 2021-10-15T14:09:55Z

@alpap What versions for SvelteKit and Carbon?

alpap · 2021-10-15T14:57:26Z

@metonym
svelte kit 1.0.0-next.184
carbon 0.45.1

metonym · 2021-10-15T15:07:31Z

@alpap So far, I was not able to reproduce with the following:

Using the UI Shell with the menu:

<!-- src/routes/index.svelte -->
<script>
    import {
      Header,
      HeaderNav,
      HeaderNavItem,
      HeaderNavMenu,
      SideNav,
      SideNavItems,
      SideNavMenu,
      SideNavMenuItem,
      SideNavLink,
      SideNavDivider,
      SkipToContent,
      Content,
      Grid,
      Row,
      Column,
    } from "carbon-components-svelte";
  
    let isSideNavOpen = false;
  </script>

<svelte:head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/carbon-components-svelte/css/white.css"
    />
  </svelte:head>
  
  <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
    <div slot="skip-to-content">
      <SkipToContent />
    </div>
  
    <HeaderNav>
      <HeaderNavItem href="/" text="Link 1" />
      <HeaderNavItem href="/" text="Link 2" />
      <HeaderNavItem href="/" text="Link 3" />
      <HeaderNavMenu text="Menu">
        <HeaderNavItem href="/" text="Link 1" />
        <HeaderNavItem href="/" text="Link 2" />
        <HeaderNavItem href="/" text="Link 3" />
      </HeaderNavMenu>
      <HeaderNavItem href="/" text="Link 4" />
    </HeaderNav>
  </Header>
  
  <SideNav bind:isOpen={isSideNavOpen}>
    <SideNavItems>
      <SideNavLink text="Link 1" />
      <SideNavLink text="Link 2" />
      <SideNavLink text="Link 3" />
      <SideNavMenu text="Menu">
        <SideNavMenuItem href="/" text="Link 1" />
        <SideNavMenuItem href="/" text="Link 2" />
        <SideNavMenuItem href="/" text="Link 3" />
      </SideNavMenu>
      <SideNavDivider />
      <SideNavLink text="Link 4" />
    </SideNavItems>
  </SideNav>
  
  <Content>
    <Grid>
      <Row>
        <Column>
          <h1>Welcome</h1>
        </Column>
      </Row>
    </Grid>
  </Content>

package.json:

{
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview"
  },
  "devDependencies": {
    "@sveltejs/kit": "next",
    "carbon-components-svelte": "^0.45.1",
    "carbon-icons-svelte": "^10.38.0",
    "svelte": "^3.42.6"
  },
  "type": "module"
}

Does the above look correct? What package manager are you using?

alpap · 2021-10-15T16:24:24Z

I found the issue the problem was that i was importing a library called sass which caused the unexpected behavior described above.
Removing it solves the problem

edumpus01 · 2023-08-07T12:39:28Z

we are deploying application using react js with ibm carbon but looks like the load of the page is too slow . requesting for a solution

theetrain · 2023-08-11T13:24:11Z

Hi @edumpus01

You're commenting on a closed issue for the Carbon Svelte repository, but it appears you have a concern with React. I recommend opening a discussion here: https://github.com/carbon-design-system/carbon/discussions

And be sure to provide details such as whether you're using Vite, Next.js, and what your Lighthouse metrics are, specifically 'first contentful paint' and 'total blocking time'.

metonym self-assigned this Apr 14, 2021

brunnerh mentioned this issue Jun 6, 2021

clipboard-copy causing problems in svelte kit #669

Closed

metonym mentioned this issue Jul 5, 2021

Remove clipboard-copy dependency from CodeSnippet, CopyButton #726

Merged

2 tasks

metonym closed this as completed Jul 5, 2021

techniq mentioned this issue Oct 16, 2021

Prebundling of libraries with Svelte components sveltejs/kit#2612

Closed

Uh oh!

Usage with SvelteKit #598

Usage with SvelteKit #598

Comments

metonym commented Apr 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Update July 5, 2021

Overriding default copy behavior

Preventing default copy behavior

jjonescz commented Apr 15, 2021

Uh oh!

metonym commented Apr 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SarcevicAntonio commented May 3, 2021

Uh oh!

tradaonline commented May 7, 2021

Uh oh!

arekbal commented May 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metonym commented May 16, 2021

Uh oh!

geoidesic commented Jun 14, 2021

Uh oh!

geoidesic commented Jun 14, 2021

Uh oh!

magick93 commented Jun 18, 2021

Uh oh!

metonym commented Jun 18, 2021

Uh oh!

alpap commented Oct 15, 2021

Uh oh!

metonym commented Oct 15, 2021

Uh oh!

alpap commented Oct 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

metonym commented Oct 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alpap commented Oct 15, 2021

Uh oh!

edumpus01 commented Aug 7, 2023

Uh oh!

theetrain commented Aug 11, 2023

Uh oh!

metonym commented Apr 14, 2021 •

edited

Loading

metonym commented Apr 15, 2021 •

edited

Loading

arekbal commented May 16, 2021 •

edited

Loading

alpap commented Oct 15, 2021 •

edited

Loading

metonym commented Oct 15, 2021 •

edited

Loading