svelte-i18n
svelte-preprocess
Our great sponsors
svelte-i18n | svelte-preprocess | |
---|---|---|
7 | 23 | |
1,156 | 1,701 | |
- | 1.5% | |
6.8 | 5.7 | |
about 1 month ago | 22 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
svelte-i18n
-
React may be getting a new hook β useEvent
Yeah I'm just using svelte-18n
-
Beam your Svelte internationalization up to a new level
Make sure you have Node.js and npm installed. It's best, if you have some experience with simple HTML, JavaScript and basic Svelte, before jumping to svelte-i18n.
- Any issues with Svelte that can be a target of an open source project?
-
Best i18n library for SvelteKit?
There are some great i18n libraries which can be used together with SvelteKit, such as svelte-i18n, typesafe-i18n or svelte-intl-precompile. However, a month ago, I decided to create my own, modular and lightweight one, because i was missing some features like dynamic translations load (load translations for visited pages only), custom translation sources (e.g. external API) or component scoped translations, etc...
-
What about localization with Svelte/SvelteKit?
I had reasonable success with https://github.com/kaisermann/svelte-i18n in one of my pet projects.
- Been using Vue for years professionally love it. But Svelte looks so good... What would I miss from Vue if I converted to Svelte?
svelte-preprocess
-
How does the Svelte compiler works with the Typescript compiler?
svelte-preprocess is responsible for processing things like TypeScript and SCSS. The svelte compiler itself is only responsible for turning the svelte file into JavaScript.
-
Sveltekit scss issue
svelte-preprocess should handle scss out-of-the-box, and itβs included in SvelteKit by default if you created your project with create-svelte
-
PostCSS- NESTED --- How can i use it inside a component
Have you tried https://github.com/sveltejs/svelte-preprocess
-
Supercharge Web DX in Svelte way
// svelte.config.js import preprocess from 'svelte-preprocess' import adapter from '@sveltejs/adapter-static' /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: [preprocess({ postcss: true })], kit: { // I can even build php file which I can use in current project seamlessly! adapter: adapter({ fallback: 'myapp.php' }), files: { assets: 'src/assets', }, appDir: 'myapp', } } export default config
-
SvelteKit error: "[vite] Error when evaluating SSR module" when using ssh2-promise
/** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(),
-
Testing Svelte components with Jest and Vite
We need to configure Jest to transform our files. We must explicitly set our test environment to jsdom, which we are using through Jest. Since v27 Jest's default test environment is node. I will put the configuration in a specific Jest configuration file called jest.config.json in the project root folder. If you create a configuration file called jest.config.js, Vite will complain as it expects only ESM JavaScript by default. Vite will recommend that you rename it to a ".cjs" file if you want to do it that way. You can look at the different ways to configure Jest if you are unsure about the file conventions. If you're using TypeScript, you need to configure svelte-preprocess and ts-jest also, see the svelte-jester docs for how to do that.
-
What if someone made a better svelte? Would people be interested?
If you want to write pug, there are tools that allow you to do that: https://github.com/sveltejs/svelte-preprocess
-
Getting started with Svelte, Tailwind, and Nrwl NX
All this file does is export a configuration object for the build of our Svelte application. By default, it uses the svelte-preprocess package, which is a preprocessor for Svelte providing support for PostCSS, SCSS, TypeScript, and much more.
-
SvelteKit - How to set up global SCSS accessible to all components?
import preprocess from 'svelte-preprocess' import path, { dirname } from 'path' import { fileURLToPath } from 'url' import adapter from '@sveltejs/adapter-node' const filePath = dirname(fileURLToPath(import.meta.url)) const sassPath = `${filePath}/src/lib/style/` const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess({ scss: { prependData: `@import '${sassPath}_global-imports.scss';` } }), .... } export default config
-
Make an Email Form Submission with SvelteKit
import adapter from '@sveltejs/adapter-vercel' import { mdsvex } from 'mdsvex' import preprocess from 'svelte-preprocess' import mdsvexConfig from './mdsvex.config.js' /** @type {import('@sveltejs/kit').Config} */ const config = { extensions: ['.svelte', ...mdsvexConfig.extensions], // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: [ mdsvex(mdsvexConfig), [ preprocess({ postcss: true, }), ], ], kit: { target: '#svelte', adapter: adapter(), }, } export default config // Workaround until SvelteKit uses Vite 2.3.8 (and it's confirmed to fix the Tailwind JIT problem) const mode = process.env.NODE_ENV const dev = mode === 'development' process.env.TAILWIND_MODE = dev ? 'watch' : 'build'
What are some alternatives?
vite - Next generation frontend tooling. It's fast!
style-resources - Style Resources for Nuxt 3
typesafe-i18n - A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
postcss-preset-env - Convert modern CSS into something browsers understand
sveltekit-blog-template - A SvelteKit blog template
headlessui - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
jsLingui - π π A readable, automated, and optimized (3 kb) internationalization for JavaScript
svelte-vite-jest-template - Svelte template based on Vite's Svelte template, but includes unit testing setup (Jest and Svelte Testing Library).
postcss-nested - PostCSS plugin to unwrap nested rules like how Sass does it.
svelte-kit-cookie-session - βοΈ Encrypted "stateless" cookie sessions for SvelteKit
houdini - The disappearing GraphQL client
svelte-intl-precompile - I18n library for Svelte.js that analyzes your keys at build time for max performance and minimal footprint