yoglib / svelte-component-template Goto Github PK

View Code? Open in Web Editor NEW

341.0 341.0 19.0 5.32 MB

A highly-opinionated base for building shareable Svelte 3 components

Home Page: https://svelte-component-template.vercel.app

License: Other

JavaScript 63.39% Svelte 24.20% HTML 11.15% Shell 1.26%

ci components library svelte template

svelte-component-template's People

Contributors

Stargazers

Watchers

Forkers

thelittlebug syedpeer antoncom andrewdc ulisesantana thekitchencoder nguyentuansi asader matteogauthier nolze nikmerlock97 sonuyadav7421 ksgolding vikingdadmedic dysfunc dumulnet ladislavkafka 1aristotelis alejandrobecwgu

svelte-component-template's Issues

Dependabot can't resolve your JavaScript dependency files

Dependabot can't resolve your JavaScript dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Error whilst updating @babel/core in /package-lock.json:
No matching version found for @babel/helper-module-transforms@^7.11.0.

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

View the update logs.

question: improve the doc

Hello! Thanks for your template, looks great! I think the default svelte template should look something like this.

Could you please think about adding some explanation about the branches ( minimal and monorepo). When should I choose it? Now I am testing the "Regular" one.

svelte-field is pointing to a bad source

I think it should be: src/components/components.module.js

svelte-component-template/package.json

Line 3 in c9c9912

"svelte": "src/components/components/components.module.js",

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/check-lint-package.yml

actions/checkout v3

actions/cache v3

pnpm/action-setup v2.2.2

actions/setup-node v3

.github/workflows/chromatic.yml

actions/checkout v3

actions/cache v3

pnpm/action-setup v2.2.2

chromaui/action v1

.github/workflows/interactions.yml

actions/checkout v3

actions/cache v3

pnpm/action-setup v2.2.2

actions/setup-node v3

npm

package.json

@babel/core 7.18.9

@babel/preset-env 7.18.9

@storybook/addon-actions 6.5.9

@storybook/addon-essentials 6.5.9

@storybook/addon-links 6.5.9

@storybook/addon-storyshots 6.5.9

@storybook/addon-svelte-csf 2.0.6

@storybook/svelte 6.5.9

@testing-library/cypress 8.0.3

@typescript-eslint/eslint-plugin 5.31.0

@typescript-eslint/parser 5.31.0

babel-loader 8.2.5

chromatic 6.7.1

cypress 9.7.0

eslint 8.20.0

eslint-config-prettier 8.5.0

eslint-plugin-cypress 2.12.1

eslint-plugin-svelte3 4.0.0

husky 8.0.1

lint-staged 13.0.3

prettier 2.7.1

prettier-plugin-svelte 2.7.0

start-server-and-test 1.14.0

svelte 3.49.0

svelte-check 2.8.0

svelte-loader 3.1.3

svelte-preprocess 4.10.7

svelte2tsx 0.5.12

tslib 2.4.0

typescript 4.7.4

Check this box to trigger a request for Renovate to run again on this repository

How do I bundle a .css file from a dependency?

I've created a wrapper component for plyr.js using your template, very handy thank you.

Run into a tricky problem, I want to bundle node_modules/plyr/dist/plyr.css into the component but can't find a way to get this working. Wondering if you have any ideas?

I've tried using svelte-preprocess, and doing the following:

<style lang="css" src="../../node_modules/plyr/dist/plyr.css" global>
</style>

and also tried doing it the way @jumanja has in svelte-bulma:.

Nothing seems to work.

If I run the app inside the template it works fine, but if I load the component into another app as a local dependency then it doesn't.

"svelte-plyr": "file:/Users/ben/dev/javascript/svelte/svelte-plyr"

EDIT: Got this working by following your https://github.com/YogliB/svelte-fullcalendar/ README. I didn't understand that the app installing the package would need to be configured with postcss. Seems that Svelte imports the .svelte files from the package, not the compiled index.min.mjs, so it doesn't make any difference whether the compiled index.min.mjs module file contains the css.

Enhancement: Move tests to cypress

The current testing setup is complex and unclear, plus makes it a bit difficult to test user behaviour.

Using Cypress should be more straightforward and enable integrate-testing more easily.

global vs eslint rule

It's a bit like splitting hair, but wouldn't defining /*global document*/ at top of the file be 0.0014% better?

svelte-component-template/src/main.js

Line 4 in 29f9aa7

// eslint-disable-next-line no-undef

Dependabot couldn't find the branch minimal

Dependabot was set up to create pull requests against the branch minimal, but couldn't find it.

If the branch has been permanently deleted you can update Dependabot's target branch from your dashboard.

View the update logs.

Monorepo leads to dev/build errors

I have install the monorepo version but after npm install and npm init running npm run dev leads to following error

$ pnpm dev

> [email protected] dev /home/projects/svelte-components
> rollup -c -w

rollup v2.35.1
bundles src/main.js → public/bundle.js...
[!] Error: Could not resolve './components' from src/App.svelte
Error: Could not resolve './components' from src/App.svelte
    at error (/home/projects/svelte-components/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at ModuleLoader.handleResolveId (/home/projects/svelte-components/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:18433:24)
    at /home/projects/svelte-components/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:18402:22
    at async Promise.all (index 1)
    at ModuleLoader.fetchStaticDependencies (/home/projects/svelte-components/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:18400:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (/home/projects/svelte-components/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:18377:9)
    at async Promise.all (index 0)
    at ModuleLoader.fetchStaticDependencies (/home/projects/svelte-components/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:18400:34)
    at async Promise.all (index 0)


[2021-01-27 18:15:55] waiting for changes...

example output is using pnpm but I have tried same process with npm and yarn but get same output

The regular version seems to work fine though

File name switch ups

As one can see, the files array in package.json and the main and module fields do not match the file names specified in rollup.config.js.

This leads to an error similar to the following after the package is installed and imported by another project:

 Error:  Cannot find module <package>

compnents.module.js

Hello! Could you please tell why do we need https://github.com/YogliB/svelte-component-template/blob/master/src/components/components.module.js file ?

If I understand it correctly we can use something like that in the App.svelte file:

import MyAwesomeComponent from './components/MyAwesomeComponent.svelte';

Should we use components.module.js ?

Thanks