{"id":21451187,"url":"https://github.com/lenra-io/client-example-svelte","last_synced_at":"2026-04-11T20:34:52.825Z","repository":{"id":195830881,"uuid":"693762534","full_name":"lenra-io/client-example-svelte","owner":"lenra-io","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-20T08:08:14.000Z","size":577,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T12:25:37.886Z","etag":null,"topics":["client","example","lenra","svelte","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lenra-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["lenra-io"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-09-19T16:57:32.000Z","updated_at":"2023-09-20T08:10:22.000Z","dependencies_parsed_at":"2024-05-01T15:46:30.300Z","dependency_job_id":"7e6055b8-eb77-4ea9-bc91-e66f3fe47b2f","html_url":"https://github.com/lenra-io/client-example-svelte","commit_stats":null,"previous_names":["taorepoara/my-app","lenra-io/client-example-svelte"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenra-io%2Fclient-example-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenra-io%2Fclient-example-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenra-io%2Fclient-example-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenra-io%2Fclient-example-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenra-io","download_url":"https://codeload.github.com/lenra-io/client-example-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243963818,"owners_count":20375678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client","example","lenra","svelte","ts","typescript"],"created_at":"2024-11-23T04:18:44.150Z","updated_at":"2025-10-29T07:40:55.226Z","avatar_url":"https://github.com/lenra-io.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lenra-io"],"categories":[],"sub_categories":[],"readme":"# create-svelte\n\nEverything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).\n\n## Creating a project\n\nIf you're seeing this, you've probably already done this step. Congrats!\n\n```bash\n# create a new project in the current directory\nnpm create svelte@latest\n\n# create a new project in my-app\nnpm create svelte@latest my-app\n```\n\n## Developing\n\nOnce you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:\n\n```bash\nnpm run dev\n\n# or start the server and open the app in a new browser tab\nnpm run dev -- --open\n```\n\n## Building\n\nTo create a production version of your app:\n\n```bash\nnpm run build\n```\n\nYou can preview the production build with `npm run preview`.\n\n\u003e To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.\n\n## Lenra integration\n\nThis project is integrated with [Lenra](https://www.lenra.io) to provide a persistent state for the application.\n\nTo add Lenra to your project, run the following command:\n\n```bash\nnpm i @lenra/client\n```\n\nThen, add the following code to your page (or in a component) `+page.svelte` file:\n\n```typescript\nimport { onMount } from \"svelte\";\nimport { LenraApp } from \"@lenra/client\";\n\n// initialize the LenraApp only in browser\nlet isConnected = false;\nlet app: LenraApp;\nonMount(() =\u003e {\n    // Connect the app to a Lenra application\n    app = new LenraApp({\n        appName: \"Example Client\",\n        clientId: \"XXX-XXX-XXX\",\n    });\n\n    app.connect().then(() =\u003e {\n        console.log(\"Connected !\");\n        isConnected = true;\n    });\n});\n```\n\nYou can now use the `app` variable to access the Lenra application and give it to the components that need it:\n\n```svelte\n{#if isConnected === true}\n    \u003cCounter {app} routeName=\"/counter/global\" /\u003e\n    \u003cCounter {app} routeName=\"/counter/me\" /\u003e\n{:else}\n    \u003cp\u003eLoading...\u003c/p\u003e\n{/if}\n```\n\nYou also need to allow the client side rendering in your page `+page.ts` file (the server side rendering still works but it can't handle Lenra authentication):\n\n```typescript\nexport const csr = true;\n```\n\nTo connect to a Lenra route in a component, you can use the `app.route` function:\n\n```typescript\nexport let app: LenraApp;\n\n// Define a local state\nlet count = 0;\n\n// Define listeners variables\nlet increment = () =\u003e {};\nlet decrement = () =\u003e {};\n\n// Connect to the route\nconst route = app.route('/counter/global', (data) =\u003e {\n    // Update the local state\n    count = data.value;\n\n    // Update the listeners\n    increment = () =\u003e {\n        route.callListener(data.onIncrement);\n    };\n    decrement = () =\u003e {\n        route.callListener(data.onDecrement);\n    };\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenra-io%2Fclient-example-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flenra-io%2Fclient-example-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenra-io%2Fclient-example-svelte/lists"}