New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
create-turbosvelte
Advanced tools
create-turbosvelte - npm Package Compare versions
Comparing version 1.5.3 to 1.5.5
@@ -6,28 +6,22 @@ <div id="top"></div> | ||
| <div align="center"> | ||
| <a href="https://github.com/Brisklemonade/sveleton"> | ||
| <a href="https://github.com/rename/rename"> | ||
| <img src="static/sveleton logo.png" alt="Logo" width="80" height="80"> | ||
| </a> | ||
| <h1 align="center">Sveleton</h1> | ||
| <h1 align="center">rename</h1> | ||
| <p align="center"> | ||
| A "skeleton" documentation site powered by MdSvex & Svelte! | ||
| A documentation site for rename packages! | ||
| <br /> | ||
| <a href="https://github.com/Brisklemonade/sveleton"><strong>Explore the docs »</strong></a> | ||
| <a href="https://github.com/rename/rename"><strong>Explore the docs »</strong></a> | ||
| <br /> | ||
| <br /> | ||
| <a href="https://sveleton-csttwfha1-brisklemonade.vercel.app/">View Demo</a> | ||
| <a href="https://rename-csttwfha1-rename.vercel.app/">View Demo</a> | ||
| · | ||
| <a href="https://github.com/Brisklemonade/sveleton/issues">Report Bug</a> | ||
| <a href="https://github.com/rename/rename/issues">Report Bug</a> | ||
| · | ||
| <a href="https://github.com/Brisklemonade/sveleton/issues">Request Feature</a> | ||
| <a href="https://github.com/rename/rename/issues">Request Feature</a> | ||
| </p> | ||
| </div> | ||
| <!-- ABOUT THE PROJECT --> | ||
| ## About The Project | ||
| Sveleton (pronounced like skeleton but with a v) is a pretty "bare bones" documentation starter project. It utilizes MdSvex for the power of markdown in your svelte components, as well as tailwind for quick styling. With both of those combined, documentation will be a breeze! | ||
| <p align="right">(<a href="#top">back to top</a>)</p> | ||
@@ -37,8 +31,2 @@ | ||
| ## Installation | ||
| ```bash | ||
| npm init sveleton app-name | ||
| ``` | ||
| <!-- CONTRIBUTING --> | ||
@@ -73,4 +61,4 @@ | ||
| Twitter - [Brisklemonaid](https://twitter.com/brisklemonaid) | ||
| Twitter - [yournamehere](https://example.com) | ||
| <p align="right">(<a href="#top">back to top</a>)</p> |
@@ -1,38 +0,3 @@ | ||
| # create-svelte | ||
| # Rename web | ||
| Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte); | ||
| ## Creating a project | ||
| If you're seeing this, you've probably already done this step. Congrats! | ||
| ```bash | ||
| # create a new project in the current directory | ||
| npm init svelte@next | ||
| # create a new project in my-app | ||
| npm init svelte@next my-app | ||
| ``` | ||
| > Note: the `@next` is temporary | ||
| ## Developing | ||
| Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: | ||
| ```bash | ||
| npm run dev | ||
| # or start the server and open the app in a new browser tab | ||
| npm run dev -- --open | ||
| ``` | ||
| ## Building | ||
| Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then: | ||
| ```bash | ||
| npm run build | ||
| ``` | ||
| > You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production. | ||
| Optional web package |
| { | ||
| "name": "create-turbosvelte", | ||
| "version": "1.5.3", | ||
| "version": "1.5.5", | ||
| "author": "", | ||
| "description": "This is an unofficial SvelteKit monorepo starter powered by Turborepo.", | ||
@@ -20,3 +21,7 @@ "bin": "./bin/cli.cjs", | ||
| }, | ||
| "keywords": [], | ||
| "keywords": [ | ||
| "Svelte", | ||
| "Component Library", | ||
| "Turborepo" | ||
| ], | ||
| "repository": { | ||
@@ -26,26 +31,4 @@ "type": "git", | ||
| }, | ||
| "author": "", | ||
| "license": "MIT", | ||
| "turbo": { | ||
| "baseBranch": "origin/main", | ||
| "npmClient": "npm", | ||
| "pipeline": { | ||
| "build": { | ||
| "dependsOn": [ | ||
| "^build" | ||
| ], | ||
| "outputs": [ | ||
| "dist/**", | ||
| ".build/**" | ||
| ] | ||
| }, | ||
| "lint": { | ||
| "outputs": [] | ||
| }, | ||
| "dev": { | ||
| "cache": false | ||
| } | ||
| } | ||
| }, | ||
| "type": "module" | ||
| } |
@@ -1,2 +0,2 @@ | ||
| # sveltekit-package-template | ||
| # Rename core | ||
@@ -7,25 +7,2 @@ A barebones project that provides the essentials for writing highly-optimized, reusable packages in Svelte using SvelteKit's [`package`](https://kit.svelte.dev/docs#packaging) feature. | ||
| ## The Problem | ||
| One of Svelte's largest pitfalls currently is it's ecosystem. Compared to more mainstream frameworks, it's userland is tiny in comparison to the thousands of available components on npm. While popularity is a large contribution to this, lack of documentation and resources is also a problem. | ||
| Many packages at the moment have some sort of pitfall. Some require bundling a large stylesheet for the entire library just to use a single component. Others require developers using it to setup a package such as [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) because they use TypeScript internally. Most of all, there really just isn't much information out there on library authoring. What many don't realize is that all of these aformentioned pitfalls can be worked around. | ||
| While svelte does offer an [official component template](https://github.com/sveltejs/component-template), it lacks many features required for a production-ready package (typescript, preprocessing, styling conventions). | ||
| ## Getting Started | ||
| These commands will set you up with a SvelteKit development environment: | ||
| ```bash | ||
| npx degit tropix126/sveltekit-package-template my-package | ||
| cd my-package | ||
| npm install # or pnpm, yarn, etc... | ||
| npm run dev | ||
| ``` | ||
| From there, you can edit the example Counter component in [src/lib/Counter/Counter.svelte](/src/lib/Counter/Counter.svelte). | ||
| The [`index.ts`](/src/lib/index.ts) file in [`src/lib`](/src/lib) exports your components for use in the package. | ||
| ## Packaging and Publishing | ||
@@ -49,20 +26,6 @@ | ||
| ## Routes | ||
| Since the package command only generates it's files from [`src/lib`](/src/lib), you are free to put whatever you wish in the [`routes`](/src/routes) folder. This could be used as a documentation site for your component, as an example. | ||
| ## Using your Package | ||
| Consumers of your package can import components from it in external projects like so: | ||
| ```html | ||
| <script> | ||
| import { Component } from "my-package"; | ||
| </script> | ||
| <Component /> | ||
| ``` | ||
| ## Setting up Documentation | ||
| Most components will need documentation in some form. This template doesn't have any opinions on how documentation should be handled, however it does provide you with SvelteKit's `routes` folder which can be used for this. Below are some very useful svelte-focused tools that can make your life considerably easier when documenting components: | ||
| - [vite-plugin-svled](https://github.com/mattjennings/vite-plugin-sveld) is a vite port of [sveld](https://github.com/carbon-design-system/sveld/), which allows you to automatically generate API documentation for your svelte components using typescript types and JSDoc comments. | ||
@@ -77,6 +40,7 @@ - [mdsvex](https://mdsvex.pngwn.io/) is a superset of markdown that allows the usage of Svelte components and interactive logic. Since mdsvex preprocesses your markdown files into Svelte components, it can also be used as SvelteKit routes. | ||
| Developers using your library could import the theme file like so: | ||
| ```html | ||
| <script> | ||
| import "my-package/theme.css"; | ||
| import { ComponentThatUsesTheming } from "my-package"; | ||
| import 'my-package/theme.css'; | ||
| import { ComponentThatUsesTheming } from 'my-package'; | ||
| </script> | ||
@@ -88,1 +52,5 @@ | ||
| Many modern bundlers support importing CSS as ES Modules. This is likely to be the best way of importing theme files, as they can be easily resolved from `node_modules`. Alternatively, you can use @import syntax with the postcss-import plugin or sass in your \<style> tags, or consider CDNS such as [unpkg](https://unpkg.com/). | ||
| ## License | ||
| All Rename packages have MIT license. |
@@ -15,3 +15,3 @@ <p align="center"> | ||
| - `rename-tsconfig`: shared `tsconfig.json`s used throughout the monorepo | ||
| - `eslint-preset-rename`: ESLint preset (coming soon) | ||
| - `eslint-preset-rename`: ESLint preset | ||
@@ -28,4 +28,8 @@ Each package and app is 100% [Typescript](https://www.typescriptlang.org/). | ||
| ## Project Configuration | ||
| # Project Configuration | ||
| ### **Modify the root `package.json`** | ||
| Make sure to modify the contents in the project's root package json to fit your needs. | ||
| ### **Running concurrent dev enviornments** | ||
@@ -32,0 +36,0 @@ |
No alert changes
Improved metrics
- Number of package files
- increased by8.33%
65
- Lines of code
- increased by0.4%
10331
- Number of lines in readme file
- increased by6.35%
67
Worsened metrics
- Total package byte prevSize
- decreased by-0.59%
394453
No dependency changes