Code Monkey home page Code Monkey logo

Comments (10)

rohanrajpal avatar rohanrajpal commented on May 15, 2024 3

Would love to have svelte kit support! Happy to contribute as well (if it is in the pipeline)

from plasmic.

Korayem avatar Korayem commented on May 15, 2024 3

I confirm that latest release of loader-svelte is working without using loader-react hacks

/utils/plasmic-init.ts

import { PUBLIC_PLASMIC_ID, PUBLIC_PLASMIC_TOKEN } from '$env/static/public';

import { initPlasmicLoader } from '@plasmicapp/loader-svelte';

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: PUBLIC_PLASMIC_ID, // ID of a project you are using
      token: PUBLIC_PLASMIC_TOKEN // API token for that project
    }
  ],
  // Fetches the latest revisions, whether or not they were unpublished!
  // Disable for production to ensure you render only published changes.
  preview: import.meta.env.DEV
});

/routes/[...catchall]/+page.server.ts SSR prerender FTW!! πŸš€

import { PLASMIC } from '$utils/plasmic-init';
import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  if (!params.catchall) throw error(404, '/');
  const plasmicPageData = await PLASMIC.maybeFetchComponentData(params.catchall, 'Component1', 'Component2');
  // This is some non-Plasmic catch-all page
  if (!plasmicPageData) throw error(404, '/');

  // Pass the data in as props.
  return {
    plasmicPageData
  };
}

/routes/[...catchall]/+page.svelte

<script>
  import { PlasmicComponent, PlasmicRootProvider } from '@plasmicapp/loader-svelte';
  import { PLASMIC } from '$utils/plasmic-init';
  import { page } from '$app/stores';
</script>

<PlasmicRootProvider loader={PLASMIC} prefetchedData={$page.data.plasmicPageData}>
  <PlasmicComponent component="Component1" componentProps={{ title: 'Hello from Mars' }} />
</PlasmicRootProvider>

<PlasmicRootProvider loader={PLASMIC} prefetchedData={$page.data.plasmicPageData}>
  <PlasmicComponent component="Component2" componentProps={{ title: 'Hello from Earth' }} />
</PlasmicRootProvider>

<PlasmicRootProvider loader={PLASMIC} prefetchedData={$page.data.plasmicPageData}>
  <PlasmicComponent component={$page.data.plasmicPageData.entryCompMetas[0].displayName} />
</PlasmicRootProvider>

This approach will match any page defined in plasmic
You can do the same with specific page
You can load plasmic components only (not whole pages) inside your existing sveltekit/svelte pages
Calling maybeFetchComponentData() allows page to be prerendered on the server

Current problems I am facing:

  • Can't get <PlasmicCanvasHost /> to work at all (see code below)
  • Doing design changes in plasmic, isn't picked up when I refresh the page. I have to restart the server.

/plasmic-host/+page.svelte

<script>
  export const prerender = false;
  export const ssr = false;
  import { PlasmicCanvasHost } from '@plasmicapp/loader-svelte';
  import { PLASMIC } from '$utils/plasmic-init';
  import { browser } from '$app/environment';
</script>

{#if browser}
  <PlasmicCanvasHost />
{/if}

from plasmic.

magick93 avatar magick93 commented on May 15, 2024

Did you manage to get plasmic to work with Sveltkit ?

from plasmic.

jbruxelle avatar jbruxelle commented on May 15, 2024

No I re-tried yesterday and i got an error from dependencies in loader/core so I gave up after a while... They should really do something for Sveltekit.

from plasmic.

magick93 avatar magick93 commented on May 15, 2024

What error did you get?

from plasmic.

arnlen avatar arnlen commented on May 15, 2024

Hi!

I'm currently testing the latest release of the @plasmicapp/loader-svelte package and I'm getting this error when trying to load a component:

'PlasmicRootProvider' refers to a value, but is being used as a type here.
Did you mean 'typeof PlasmicRootProvider'? ts(2749)

My source files, which are a copy/paste from this React documentation.

// $lib/plasmic-init.ts

import { initPlasmicLoader } from "@plasmicapp/loader-svelte";

const PROJECT_ID = "xxx";
const API_TOKEN = "xxx"

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: PROJECT_ID,
      token: API_TOKEN
    }
  ],
  preview: true,
})
// $routes/plasmicTestPage.svelte

<script lang="ts">
  import { PlasmicRootProvider, PlasmicComponent } from '@plasmicapp/loader-react';
  import { PLASMIC } from '$lib/plasmic-init';

  const COMPONENT_NAME = "Homepage";

  function MyComponent() {
    return (
      <PlasmicRootProvider loader={PLASMIC}>
        <PlasmicComponent component=COMPONENT_NAME />
      </PlasmicRootProvider>
    );
  }
</script>

Does anyone been able to get this Plasmic loader work within Sveltkit?
We seem to be really close to working now!

from plasmic.

arenzel avatar arenzel commented on May 15, 2024

In your $routes/plasmicTestPage.svelte file:

  1. Change the import source from @plasmicapp/loader-react to @plasmicapp/loader-svelte
  2. Extract the function body to the HTML part of the file.

Your file should look like:

<script lang="ts">
  import { PlasmicRootProvider, PlasmicComponent } from '@plasmicapp/loader-svelte';
  import PLASMIC from '$lib/plasmic-init.svelte';

  const COMPONENT_NAME = "Homepage";
</script>

<PlasmicRootProvider loader={PLASMIC}>
  <PlasmicComponent component={COMPONENT_NAME} />
</PlasmicRootProvider>

from plasmic.

arenzel avatar arenzel commented on May 15, 2024

Following my last comment, I was trying to make it run by myself.
With the implementation suggested by @arnlen, when trying to access the page, I'm getting a console full of errors:

Screenshot from the Bravo/Chrome console

Capture d’écran 2022-03-16 aΜ€ 10 55 48

Transcript

PlasmicRootProvider.tsx:175 Uncaught TypeError: Cannot read properties of undefined (reading 'getLookup')
    at buildCss (PlasmicRootProvider.tsx:175:6)
    at PlasmicCss2 (PlasmicRootProvider.tsx:136:20)
    at renderWithHooks (react-dom.development.js:14985:18)
    at updateFunctionComponent (react-dom.development.js:17356:20)
    at updateSimpleMemoComponent (react-dom.development.js:17215:10)
    at updateMemoComponent (react-dom.development.js:17092:14)
    at beginWork (react-dom.development.js:19135:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
PlasmicComponent.tsx:40 Uncaught TypeError: Cannot read properties of undefined (reading 'getLookup')
    at PlasmicComponent (PlasmicComponent.tsx:40:37)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)
    at beginWork (react-dom.development.js:19049:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)
    at performUnitOfWork (react-dom.development.js:22776:12)
    at workLoopSync (react-dom.development.js:22707:5)
react-dom.development.js:20085 The above error occurred in the <PlasmicCss2> component:

    at PlasmicCss2 (http://localhost:3000/node_modules/.vite/@plasmicapp_loader-react.js?v=ffe1cc8a:8513:22)
    at PlasmicQueryDataProvider (http://localhost:3000/node_modules/.vite/@plasmicapp_loader-react.js?v=ffe1cc8a:5785:24)
    at PlasmicRootProvider (http://localhost:3000/node_modules/.vite/@plasmicapp_loader-react.js?v=ffe1cc8a:8489:30)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
react-dom.development.js:20085 The above error occurred in the <PlasmicComponent> component:

    at PlasmicComponent (http://localhost:3000/node_modules/.vite/@plasmicapp_loader-react.js?v=ffe1cc8a:9121:25)
    at PlasmicQueryDataProvider (http://localhost:3000/node_modules/.vite/@plasmicapp_loader-react.js?v=ffe1cc8a:5785:24)
    at PlasmicRootProvider (http://localhost:3000/node_modules/.vite/@plasmicapp_loader-react.js?v=ffe1cc8a:8489:30)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

from plasmic.

arenzel avatar arenzel commented on May 15, 2024

Hi!

I started over from a fresh installation to avoid any side/edge effect.
After integrating the example code sent by @FMota0 on Slack, I'm getting this error:

image

Here is a step by step to reproduce:

1. Create & setup SvelteKit demo app

$ npm init svelte@next sveltekit-plasmic-integration
Need to install the following packages:
  create-svelte@next
Ok to proceed? (y) y

create-svelte version 2.0.0-next.126

Welcome to SvelteKit! [...]

βœ” Which Svelte app template? β€Ί [SvelteKit demo app]
βœ” Use TypeScript? … No / [Yes]
βœ” Add ESLint for code linting? … [No] / Yes
βœ” Add Prettier for code formatting? … [No] / Yes
βœ” Add Playwright for browser testing? … [No] / Yes

Your project is ready!
βœ” Typescript
  Inside Svelte components, use <script lang="ts">
[...]

$ npm i @plasmicapp/loader-svelte

2. Create Plasmic init file

// $lib/init.ts

import { initPlasmicLoader } from '@plasmicapp/loader-svelte';

const PROJECT_ID = "xxx";
const API_TOKEN = "xxx";

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: PROJECT_ID,
      token: API_TOKEN
    }
  ],
  preview: true
});

3. Add to a test route file

<!--  $routes/index.svelte -->

<script lang="ts">
  import Counter from '$lib/Counter.svelte';
  import { PLASMIC } from "$lib/init";  // <=== this import causes error
  import { PlasmicComponent, PlasmicRootProvider } from "@plasmicapp/loader-svelte";

  const COMPONENT_NAME = "Home";
</script>

4. Errors πŸ’₯

In the browser

The requested module '/node_modules/isomorphic-unfetch/browser.js?v=84862a93' does not provide an export named 'default'

SyntaxError: The requested module '/node_modules/isomorphic-unfetch/browser.js?v=84862a93' does not provide an export named 'default'

In the terminal

22:52:55 [vite] Error when evaluating SSR module /node_modules/react/index.js?v=84862a93:
ReferenceError: module is not defined
    at /node_modules/react/index.js?v=84862a93:6:3
    at instantiateModule (/<path>/sveltekit-plasmic-integration/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)
22:52:55 [vite] Error when evaluating SSR module /node_modules/@plasmicapp/host/dist/host.esm.js?v=84862a93:
ReferenceError: module is not defined
    at /node_modules/react/index.js?v=84862a93:4:3
    at instantiateModule (/<path>/sveltekit-plasmic-integration/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)
22:52:55 [vite] Error when evaluating SSR module /node_modules/@plasmicapp/loader-react/dist/loader-react.esm.js?v=84862a93:
ReferenceError: module is not defined
    at /node_modules/react/index.js?v=84862a93:4:3
    at instantiateModule (/<path>/sveltekit-plasmic-integration/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)
22:52:55 [vite] Error when evaluating SSR module /node_modules/@plasmicapp/loader-svelte/src/index.js:
ReferenceError: module is not defined
    at /node_modules/react/index.js?v=84862a93:4:3
    at instantiateModule (/<path>/sveltekit-plasmic-integration/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)
22:52:55 [vite] Error when evaluating SSR module /src/lib/init.ts:
ReferenceError: module is not defined
    at /node_modules/react/index.js?v=84862a93:4:3
    at instantiateModule (/<path>/sveltekit-plasmic-integration/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)
22:52:55 [vite] Error when evaluating SSR module /src/routes/index.svelte:
ReferenceError: module is not defined
    at /node_modules/react/index.js?v=84862a93:4:3
    at instantiateModule (/<path>/sveltekit-plasmic-integration/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)
module is not defined
ReferenceError: module is not defined
    at /node_modules/react/index.js?v=84862a93:4:3
    at instantiateModule (/<path>/sveltekit-plasmic-integration/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)

from plasmic.

arenzel avatar arenzel commented on May 15, 2024

According to @FMota0, this issue is related to a bug in loader-svelte.
I've created the new issue above to track its status. ☝️

βœ… For now, a quick fix that works:

  • installing and using @plasmicapp/loader-react in the init file
  • but using @plasmicapp/loader-svelte in the svelte files
// $lib/init.ts

import { initPlasmicLoader } from '@plasmicapp/loader-react'; // <=== WORKAROUND HERE

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: <ID>,
      token: <API_TOKEN>
    }
  ],
  preview: true
});

A huge thanks to @FMota0 for its precious help: I can now move on! πŸ™

from plasmic.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.