update to paraglide js v2 #461
Conversation
🦋 Changeset detectedLatest commit: 86d6c00 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| 'https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@1/dist/index.js', | ||
| 'https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@1/dist/index.js', | ||
| 'https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@1/dist/index.js', | ||
| 'https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@1/dist/index.js', | ||
| 'https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@1/dist/index.js', |
There was a problem hiding this comment.
Lint rules have been deprecated in favor of upcoming lix validation rules that are more generalizable opral/lix-sdk#239
| } | ||
| }; | ||
|
|
||
| const options = defineAddonOptions({ | ||
| availableLanguageTags: { | ||
| question: `Which languages would you like to support? ${colors.gray('(e.g. en,de-ch)')}`, | ||
| type: 'string', | ||
| default: 'en', | ||
| default: 'en, de', |
There was a problem hiding this comment.
added a second language to have a better demo. i skipped through "which languages do you want to support?" several times. the demo will only have one language as a result leading to a "okay and now?" moment
| const ext = typescript ? 'ts' : 'js'; | ||
| if (!kit) throw new Error('SvelteKit is required'); | ||
|
|
||
| const paraglideOutDir = 'src/lib/paraglide'; | ||
|
|
||
| sv.dependency('@inlang/paraglide-sveltekit', '^0.15.5'); |
There was a problem hiding this comment.
the sveltekit adapter is not needed anymore. hallelujah
| sv.file(`src/lib/i18n.${ext}`, (content) => { | ||
| const { ast, generateCode } = parseScript(content); | ||
|
|
||
| imports.addNamed(ast, '@inlang/paraglide-sveltekit', { createI18n: 'createI18n' }); | ||
| imports.addDefault(ast, '$lib/paraglide/runtime', '* as runtime'); | ||
|
|
||
| const createI18nExpression = common.expressionFromString('createI18n(runtime)'); | ||
| const i18n = variables.declaration(ast, 'const', 'i18n', createI18nExpression); | ||
|
|
||
| const existingExport = exports.namedExport(ast, 'i18n', i18n); | ||
| if (existingExport.declaration !== i18n) { | ||
| log.warn('Setting up $lib/i18n failed because it already exports an i18n function'); | ||
| } | ||
|
|
||
| return generateCode(); | ||
| }); | ||
|
|
There was a problem hiding this comment.
no more i18n.js needed in v2 🙏
| // add the <ParaglideJS> component to the layout | ||
| sv.file(`${kit.routesDirectory}/+layout.svelte`, (content) => { | ||
| const { script, template, generateCode } = parseSvelte(content, { typescript }); | ||
|
|
||
| const paraglideComponentName = 'ParaglideJS'; | ||
| imports.addNamed(script.ast, '@inlang/paraglide-sveltekit', { | ||
| [paraglideComponentName]: paraglideComponentName | ||
| }); | ||
| imports.addNamed(script.ast, '$lib/i18n', { i18n: 'i18n' }); | ||
|
|
||
| if (template.source.length === 0) { | ||
| const svelteVersion = dependencyVersion('svelte'); | ||
| if (!svelteVersion) throw new Error('Failed to determine svelte version'); | ||
|
|
||
| html.addSlot(script.ast, template.ast, svelteVersion); | ||
| } | ||
|
|
||
| const templateCode = new MagicString(template.generateCode()); | ||
| if (!templateCode.original.includes('<ParaglideJS')) { | ||
| templateCode.indent(); | ||
| templateCode.prepend('<ParaglideJS {i18n}>\n'); | ||
| templateCode.append('\n</ParaglideJS>'); | ||
| } | ||
|
|
||
| return generateCode({ script: script.generateCode(), template: templateCode.toString() }); | ||
| }); | ||
|
|
There was a problem hiding this comment.
no more provider and layout needed in v2 🙏
| @@ -204,8 +164,7 @@ export default defineAddon({ | |||
| } | |||
| htmlNode.attribs = { | |||
| ...htmlNode.attribs, | |||
| lang: '%paraglide.lang%', | |||
| dir: '%paraglide.textDirection%' | |||
There was a problem hiding this comment.
removing textDir because users reported issues with the Intl API behaving differently in different runtimes.
it's better to have a working setup for everyone that users can improve themselves than a half broken setup
| if (!scriptCode.original.includes('function switchToLanguage')) { | ||
| scriptCode.trim(); | ||
| scriptCode.append('\n\n'); | ||
| scriptCode.append(dedent` | ||
| ${ts('', '/**')} | ||
| ${ts('', '* @param {import("$lib/paraglide/runtime").AvailableLanguageTag} newLanguage')} | ||
| ${ts('', '*/')} | ||
| function switchToLanguage(newLanguage${ts(': AvailableLanguageTag')}) { | ||
| const canonicalPath = i18n.route(page.url.pathname); | ||
| const localisedPath = i18n.resolveRoute(canonicalPath, newLanguage); | ||
| goto(localisedPath); | ||
| } | ||
| `); | ||
| } |
There was a problem hiding this comment.
setLocale() just works in v2, irrespective of the chosen strategy
| templateCode.append( | ||
| '<p>\nIf you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a> for a better i18n experience.\n</p>' | ||
| ); | ||
|
|
There was a problem hiding this comment.
Moved the recommendation form the CLI into the paraglide js demo with a link to directly open the vscode marketplace
Paraglide JS 2.0 is going to be released on Monday (March 3). This PR updates the addon to set up and use v2 of Paraglide JS.
Pre-elimnary release notes for Paraglide JS v2 can be found here
Don't merge this before v2 got released (March 3)