{"id":17668820,"url":"https://github.com/lukasjhan/global-sdk-example","last_synced_at":"2026-02-10T03:02:20.284Z","repository":{"id":212946761,"uuid":"732677251","full_name":"lukasjhan/global-sdk-example","owner":"lukasjhan","description":"Global SDK example with React UI","archived":false,"fork":false,"pushed_at":"2024-03-29T14:26:18.000Z","size":9429,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T05:49:58.658Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukasjhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-12-17T13:38:35.000Z","updated_at":"2023-12-17T13:40:13.000Z","dependencies_parsed_at":"2024-10-24T02:10:25.087Z","dependency_job_id":"4389708e-be12-4182-92e2-3f5bc74cf0e9","html_url":"https://github.com/lukasjhan/global-sdk-example","commit_stats":null,"previous_names":["lukasjhan/global-sdk-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lukasjhan/global-sdk-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasjhan%2Fglobal-sdk-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasjhan%2Fglobal-sdk-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasjhan%2Fglobal-sdk-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasjhan%2Fglobal-sdk-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasjhan","download_url":"https://codeload.github.com/lukasjhan/global-sdk-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasjhan%2Fglobal-sdk-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270579613,"owners_count":24610044,"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","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-23T23:42:13.856Z","updated_at":"2026-02-10T03:02:20.252Z","avatar_url":"https://github.com/lukasjhan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Global SDK Example\n\n## Introduction\n\nThis example show how to integrate the SDK with REACT UI components. In the past, it was not possible to synchronize React's life cycle with the global object(window), so we had to use Hack to do so.\n\nlike below:\n\n```javascript\nconst Provider = ({ children }: { children: any }) =\u003e {\n  const [data, setData] = useState\u003cContextState\u003e({\n    project: null,\n    user: null,\n    workspaces: [],\n    lang: i18n.language.substring(0, 2),\n    design: null,\n  });\n\n  const setProject = (project: Project) =\u003e {\n    setData((prev) =\u003e ({ ...prev, project }));\n  };\n\n  const setDesign = (newDesign: Partial\u003cDesign\u003e) =\u003e {\n    setData((prev) =\u003e ({ ...prev, design: { ...prev.design, ...newDesign } }));\n  };\n\n  const logout = () =\u003e {\n    setData((prev) =\u003e ({ ...prev, user: null }));\n  };\n  window.sdk.setProject = setProject;\n  window.sdk.setDesign = setDesign;\n  window.sdk.logout = logout;\n...\n```\n\nWe make a React Provider component that serve as a bridge between the SDK and the React components. The problem is that we have to use the global object(window) to expose the functions to the SDK, and this is NOT a good practice.\n\nNow, we can use the new SDK to do the same thing, but in a better way using [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore#subscribing-to-an-external-store)\n\nYou can make a global SDK with React UI components easily and cleanly by using this method.\n\n```javascript\nfunction App() {\n  const data = useSyncExternalStore(\n    mySDKStore.subscribe,\n    mySDKStore.getSnapshot,\n  );\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n        \u003cp\u003e{data.label}\u003c/p\u003e\n\n        \u003cbutton\n          onClick={() =\u003e {\n            window.setLabel('new Label');\n          }}\n        \u003e\n          Button\n        \u003c/button\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nAnd you can check the implementation in src/external.ts\n\n```typescript\nlet data = { label: 'Edit src/App.tsx and save to reload.' };\nlet listeners: Array\u003c() =\u003e void\u003e = [];\n\nexport const mySDKStore = {\n  setLabel(newLabel: string) {\n    data = { label: newLabel };\n    emitChange();\n  },\n  subscribe(listener: () =\u003e void) {\n    listeners = [...listeners, listener];\n    return () =\u003e {\n      listeners = listeners.filter((l) =\u003e l !== listener);\n    };\n  },\n  getSnapshot() {\n    return data;\n  },\n};\n\nfunction emitChange() {\n  for (let listener of listeners) {\n    console.log(1);\n    listener();\n  }\n}\n\nwindow.data = data;\nwindow.setLabel = mySDKStore.setLabel;\n```\n\nWe can use global scope object as a hook into the components. This allows us to use the SDK in a more natural way. It's just like a normal React component.\n\n## How to use and check proof of concept\n\n1. Install dependencies\n\n```bash\npnpm install\n```\n\n2. Run React Project\n\n```bash\npnpm run start\n```\n\nIt will start the application in http://localhost:3000\n\n3. You can click the button in the webpage or use the console to change the label.\n\n```javascript\n// in your browser console\nwindow.setLabel('new label');\n```\n\n![poc](/docs/poc.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasjhan%2Fglobal-sdk-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasjhan%2Fglobal-sdk-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasjhan%2Fglobal-sdk-example/lists"}