feat: initial state through query params

[riccardoperra]

Add state query param support to open the editor with the given settings

[codesandbox[bot]]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 14cd4b6f064ad05f16da34b1957f454c4b9e7dbe

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions[bot]]

Deploy preview for codeimage-website-dev ready!

✅ Preview https://codeimage-website-mbax6vhua-riccardoperra.vercel.app https://codeimage-website-pr-529.vercel.app

Built with commit 14cd4b6f064ad05f16da34b1957f454c4b9e7dbe. This pull request is being automatically deployed with vercel-action

[github-actions[bot]]

Deploy preview for codeimage-highlight-dev ready!

✅ Preview https://codeimage-highlight-fk57t700x-riccardoperra.vercel.app https://codeimage-highlight-pr-529.vercel.app

Built with commit 14cd4b6f064ad05f16da34b1957f454c4b9e7dbe. This pull request is being automatically deployed with vercel-action

[github-actions[bot]]

Deploy preview for codeimage ready!

✅ Preview https://codeimage-fa8lganqo-riccardoperra.vercel.app https://codeimage-app-pr-529.vercel.app

Built with commit 74b8b0401aba8000f56fdb244c042d7f12802dcd. This pull request is being automatically deployed with vercel-action

[riccardoperra]

Example of state:

{
  "name": "Test",
  "editorTabs": [
    {
      "id": "40ec4f64-424f-4247-9b9a-c8a31a9d3a9b",
      "projectId": "2eee22c8-bf71-4181-ac27-669b4a472ba5",
      "code": "@Component({\n  selector: \"my-app\",\n  standalone: true,\n  template: `\n    {{ fullName() }} <button (click)=\"setName('John')\">Click</button>\n  `\n})\nexport class App {\n  firstName = signal(\"Jane\");\n  lastName = signal(\"Doe\");\n  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);\n\n  constructor() {\n    effect(() => console.log(\"Name changed:\", this.fullName()));\n  }\n\n  setName(newName: string) {\n    this.firstName.set(newName);\n  }\n}",
      "languageId": "typescript",
      "tabName": "app.component.ts"
    },
    {
      "id": "f60ab838-ba08-490f-95c9-1a666c88bfa8",
      "projectId": "2eee22c8-bf71-4181-ac27-669b4a472ba5",
      "code": "function Counter() {\n  const [count, setCount] = createSignal(0);\n  \n  setInterval(\n    () => setCount(count() + 1),\n    1000\n  );\n\n  return <div>The count is {count()}</div>\n}\n",
      "languageId": "typescript",
      "tabName": "app.service.ts"
    }
  ],
  "editorOptions": {
    "id": "70e5cf36-f2e2-4c69-9e17-f8c5c707eb42",
    "fontId": "source-code-pro",
    "fontWeight": 400,
    "showLineNumbers": true,
    "themeId": "panda",
    "enableLigatures": true
  },
  "frame": {
    "id": "1f6cbdf9-badc-4196-bd88-82336685843a",
    "background": "link:https://kwote.app/_next/static/media/17.f548c0d1.jpg",
    "padding": 64,
    "radius": 24,
    "visible": true,
    "opacity": 100
  },
  "terminal": {
    "id": "3747b325-b527-42c2-87de-a2834227a1e4",
    "showHeader": true,
    "type": "macOs",
    "accentVisible": false,
    "shadow": "rgb(0 0 0 / 40%) 0px 30px 55px",
    "background": "#292A2B",
    "textColor": "#ffffff",
    "showWatermark": true,
    "showGlassReflection": false,
    "opacity": 100,
    "alternativeTheme": true
  }
}

Encoded through JSON.stringify + encodeURIComponent

https://codeimage-app-pr-529.vercel.app/?state=%7B%22name%22%3A%22Test%22%2C%22editorTabs%22%3A%5B%7B%22id%22%3A%2240ec4f64-424f-4247-9b9a-c8a31a9d3a9b%22%2C%22projectId%22%3A%222eee22c8-bf71-4181-ac27-669b4a472ba5%22%2C%22code%22%3A%22%40Component(%7B%5Cn%20%20selector%3A%20%5C%22my-app%5C%22%2C%5Cn%20%20standalone%3A%20true%2C%5Cn%20%20template%3A%20%60%5Cn%20%20%20%20%7B%7B%20fullName()%20%7D%7D%20%3Cbutton%20(click)%3D%5C%22setName(%27John%27)%5C%22%3EClick%3C%2Fbutton%3E%5Cn%20%20%60%5Cn%7D)%5Cnexport%20class%20App%20%7B%5Cn%20%20firstName%20%3D%20signal(%5C%22Jane%5C%22)%3B%5Cn%20%20lastName%20%3D%20signal(%5C%22Doe%5C%22)%3B%5Cn%20%20fullName%20%3D%20computed(()%20%3D%3E%20%60%24%7Bthis.firstName()%7D%20%24%7Bthis.lastName()%7D%60)%3B%5Cn%5Cn%20%20constructor()%20%7B%5Cn%20%20%20%20effect(()%20%3D%3E%20console.log(%5C%22Name%20changed%3A%5C%22%2C%20this.fullName()))%3B%5Cn%20%20%7D%5Cn%5Cn%20%20setName(newName%3A%20string)%20%7B%5Cn%20%20%20%20this.firstName.set(newName)%3B%5Cn%20%20%7D%5Cn%7D%22%2C%22languageId%22%3A%22typescript%22%2C%22tabName%22%3A%22app.component.ts%22%7D%2C%7B%22id%22%3A%22f60ab838-ba08-490f-95c9-1a666c88bfa8%22%2C%22projectId%22%3A%222eee22c8-bf71-4181-ac27-669b4a472ba5%22%2C%22code%22%3A%22function%20Counter()%20%7B%5Cn%20%20const%20%5Bcount%2C%20setCount%5D%20%3D%20createSignal(0)%3B%5Cn%20%20%5Cn%20%20setInterval(%5Cn%20%20%20%20()%20%3D%3E%20setCount(count()%20%2B%201)%2C%5Cn%20%20%20%201000%5Cn%20%20)%3B%5Cn%5Cn%20%20return%20%3Cdiv%3EThe%20count%20is%20%7Bcount()%7D%3C%2Fdiv%3E%5Cn%7D%5Cn%22%2C%22languageId%22%3A%22typescript%22%2C%22tabName%22%3A%22app.service.ts%22%7D%5D%2C%22editorOptions%22%3A%7B%22id%22%3A%2270e5cf36-f2e2-4c69-9e17-f8c5c707eb42%22%2C%22fontId%22%3A%22source-code-pro%22%2C%22fontWeight%22%3A400%2C%22showLineNumbers%22%3Atrue%2C%22themeId%22%3A%22panda%22%2C%22enableLigatures%22%3Atrue%7D%2C%22frame%22%3A%7B%22id%22%3A%221f6cbdf9-badc-4196-bd88-82336685843a%22%2C%22background%22%3A%22link%3Ahttps%3A%2F%2Fkwote.app%2F_next%2Fstatic%2Fmedia%2F17.f548c0d1.jpg%22%2C%22padding%22%3A64%2C%22radius%22%3A24%2C%22visible%22%3Atrue%2C%22opacity%22%3A100%7D%2C%22terminal%22%3A%7B%22id%22%3A%223747b325-b527-42c2-87de-a2834227a1e4%22%2C%22showHeader%22%3Atrue%2C%22type%22%3A%22macOs%22%2C%22accentVisible%22%3Afalse%2C%22shadow%22%3A%22rgb(0%200%200%20%2F%2040%25)%200px%2030px%2055px%22%2C%22background%22%3A%22%23292A2B%22%2C%22textColor%22%3A%22%23ffffff%22%2C%22showWatermark%22%3Atrue%2C%22showGlassReflection%22%3Afalse%2C%22opacity%22%3A100%2C%22alternativeTheme%22%3Atrue%7D%7D

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.