plasmicapp / plasmic Goto Github PK
View Code? Open in Web Editor NEWVisual builder for React. Build apps, websites, and content. Integrate with your codebase.
Home Page: https://www.plasmic.app
License: MIT License
Visual builder for React. Build apps, websites, and content. Integrate with your codebase.
Home Page: https://www.plasmic.app
License: MIT License
Hi, there is an error in the React starter code since an upgrade to ReactDOMv6 https://reactrouter.com/docs/en/v6/upgrading/v5
I'll put here the correction in order to adjust the docs
old
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom
new
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
old
<PlasmicRootProvider loader={PLASMIC}>
<Router>
<Switch>
<Route component={CatchAllPage} />
</Switch>
</Router>
</PlasmicRootProvider>
new
<PlasmicRootProvider loader={PLASMIC}>
<Router>
<Routes>
<Route path="/" element={CatchAllPage()}/>
</Routes>
</Router>
</PlasmicRootProvider>
If I'm using component A in component B, but A is imported from another project. And I pass in dynamic data code expressions as the slot value for A. I cannot update to new versions of A from B
Feature Request:
Is it possible to create the model definitions using a JSON schema file that I can upload? Afterwards, having the inputted model, I'd like to be able to upload JSON files containing instances of the model I already registered in plasmic cms?
Currently it isn't possible to pass ref
to PlasmicLink
.
Plasmic has a community Slack at https://plasmic.app/slack, and questions from it are mirrored to https://forum.plasmic.app. These are the best places to ask questions or get support!
Feel free to report issues with the open-source repo here on GitHub.
A few packages in plasmicpkgs (plasmic-cms, react-scroll-parallax,lottie-react for example) use 0.0.x for their version.
This leads to updates always indicating a major breaking release. This makes it harder to update them automatically via tooling.
Is there a reason not to use 0.x.y (or even x.y.z) for them to distinguish between major an minor upgrades?
As far as I can tell plasmicpkgs versions are automatically bumped, so it is probably hard to distinguish between major and minor upgrades?
Hi!
I haven't touched my plasmic project in a while and came back to it today. When I make some changes in Plasmic Studio and then "publish", the GH action always fails:
The logs of that GH action are here: error-log-plasmic.yml.txt. I first get a large number of warnings and finally an error:
[...]
ENOENT: no such file or directory, open '/home/runner/work/cad-viewer/cad-viewer/cad-viewer-website/node_modules/.staging/@material-ui/core-2667166c/esm/Icon/index.js'
npm WARN
tar ENOENT: no such file or directory, open '/home/runner/work/cad-viewer/cad-viewer/cad-viewer-website/node_modules/.staging/@material-ui/icons-9895f66b/esm/BluetoothConnectedTwoTone.js'
npm WARN
tar ENOENT: no such file or directory, lstat '/home/runner/work/cad-viewer/cad-viewer/cad-viewer-website/node_modules/.staging/three-bc89ea25/examples'
Error: stderr maxBuffer length exceeded
The CLI command plasmic sync
still works. Help would be much appreciated!
I have been trying to setup a new Plasmic project, but plasmic sync
insists on failing.
The command works as expected up to the creation of the plasmic.json
file, but after that it hangs forever.
$ DEBUG=* plasmic sync -p [redacted] --all-files
winston:create-logger: Define prototype method for "error"
winston:create-logger: Define prototype method for "warn"
winston:create-logger: Define prototype method for "info"
winston:create-logger: Define prototype method for "http"
winston:create-logger: Define prototype method for "verbose"
winston:create-logger: Define prototype method for "debug"
winston:create-logger: Define prototype method for "silly"
winston:create-logger: Define prototype method for "error"
winston:create-logger: Define prototype method for "warn"
winston:create-logger: Define prototype method for "info"
winston:create-logger: Define prototype method for "http"
winston:create-logger: Define prototype method for "verbose"
winston:create-logger: Define prototype method for "debug"
winston:create-logger: Define prototype method for "silly"
follow-redirects options {
maxRedirects: 21,
maxBodyLength: 10485760,
protocol: 'https:',
path: '/api/v1/auth/self',
method: 'GET',
headers: {
Accept: 'application/json, text/plain, */*',
'x-plasmic-api-user': '[redacted]',
'x-plasmic-api-token': '[redacted]',
'User-Agent': 'axios/0.21.4'
},
agent: undefined,
agents: { http: undefined, https: undefined },
auth: undefined,
hostname: 'studio.plasmic.app',
port: null,
nativeProtocols: {
'http:': {
_connectionListener: [Function: connectionListener],
METHODS: [Array],
STATUS_CODES: [Object],
Agent: [Function],
ClientRequest: [Function: ClientRequest],
IncomingMessage: [Function: IncomingMessage],
OutgoingMessage: [Function: OutgoingMessage],
Server: [Function: Server],
ServerResponse: [Function: ServerResponse],
createServer: [Function: createServer],
validateHeaderName: [Function: __node_internal_],
validateHeaderValue: [Function: __node_internal_],
get: [Function: get],
request: [Function: request],
maxHeaderSize: [Getter],
globalAgent: [Getter/Setter]
},
'https:': {
Agent: [Function: Agent],
globalAgent: [Agent],
Server: [Function: Server],
createServer: [Function: createServer],
get: [Function: get],
request: [Function: request]
}
}
} +0ms
follow-redirects options {
maxRedirects: 21,
maxBodyLength: 10485760,
protocol: 'https:',
path: '/api/v1/code/required-packages',
method: 'POST',
headers: {
Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json',
'x-plasmic-api-user': '[redacted]',
'x-plasmic-api-token': '[redacted]',
'User-Agent': 'axios/0.21.4',
'Content-Length': 2
},
agent: undefined,
agents: { http: undefined, https: undefined },
auth: undefined,
hostname: 'codegen.plasmic.app',
port: null,
nativeProtocols: {
'http:': {
_connectionListener: [Function: connectionListener],
METHODS: [Array],
STATUS_CODES: [Object],
Agent: [Function],
ClientRequest: [Function: ClientRequest],
IncomingMessage: [Function: IncomingMessage],
OutgoingMessage: [Function: OutgoingMessage],
Server: [Function: Server],
ServerResponse: [Function: ServerResponse],
createServer: [Function: createServer],
validateHeaderName: [Function: __node_internal_],
validateHeaderValue: [Function: __node_internal_],
get: [Function: wrappedMethod],
request: [Function: wrappedMethod],
maxHeaderSize: [Getter],
globalAgent: [Getter/Setter]
},
'https:': {
Agent: [Function: Agent],
globalAgent: [Agent],
Server: [Function: Server],
createServer: [Function: createServer],
get: [Function: wrappedMethod],
request: [Function: wrappedMethod]
}
}
} +351ms
It hangs there for a couple of minutes without any new message or any code synced. If I wait long enough, an OOM error shows up:
<--- Last few GCs --->
[54580:0x7f8f5f02b000] 156507 ms: Mark-sweep 4051.2 (4138.7) -> 4038.1 (4141.7) MB, 1335.9 / 0.0 ms (average mu = 0.251, current mu = 0.196) allocation failure; scavenge might not succeed
[54580:0x7f8f5f02b000] 158922 ms: Mark-sweep 4054.0 (4141.7) -> 4041.8 (4145.5) MB, 2092.5 / 0.0 ms (average mu = 0.184, current mu = 0.134) allocation failure; scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 0x110634d85 node::Abort() (.cold.1) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
2: 0x10f0f9f89 node::Abort() [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
3: 0x10f0fa0ff node::OnFatalError(char const*, char const*) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
4: 0x10f282527 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
5: 0x10f44ab35 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
6: 0x10f449512 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
7: 0x10f43b84a v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
8: 0x10f43c1c5 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
9: 0x10f41de0a v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
10: 0x10f417829 v8::internal::MaybeHandle<v8::internal::SeqTwoByteString> v8::internal::FactoryBase<v8::internal::Factory>::NewRawStringWithMap<v8::internal::SeqTwoByteString>(int, v8::internal::Map, v8::internal::AllocationType) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
11: 0x10f764b5f v8::internal::String::SlowFlatten(v8::internal::Isolate*, v8::internal::Handle<v8::internal::ConsString>, v8::internal::AllocationType) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
12: 0x10f86df21 v8::internal::Runtime_StringCharCodeAt(int, unsigned long*, v8::internal::Isolate*) [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
13: 0x10fc4ee79 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/zvictor/.volta/tools/image/node/18.6.0/bin/node]
Things I have tried:
plasmic.json
files--all-files
I am trying to add an onclick listener to button on the page. Also, I am using REST API to fetch html from Plasmic. In componentProps query documentation there is a line:
This should be the props to be passed to the component, with this you can customize which variants are going to be active, define the value of expected props and override slots content (with text only).
And indeed, when I try to pass function as a prop to api, it fails with code 500. Does that mean that it is not possible to use event listeners with plasmic rest api?
Hi all,
I'm getting an strange error in my next application. In some pages, such as this, when you enter and reload the page, there is some duplicated content. But if you inspect the page, you can see that this duplicated content is outside the _document.tsx page (I mean, the div with the id="__next").
I'm attaching a screenshot of the console so you can check it too.
Hi,
I would like to use the useRef
hook on Plasmic Components to get an imperative handle on the underlying DOM element, i.e.
function Projects() {
// Use PlasmicProjects to render this component as it was
// designed in Plasmic, by activating the appropriate variants,
// attaching the appropriate event handlers, etc. You
// can also install whatever React hooks you need here to manage state or
// fetch data.
//
// Props you can pass into PlasmicProjects are:
// 1. Variants you want to activate,
// 2. Contents for slots you want to fill,
// 3. Overrides for any named node in the component to attach behavior and data,
// 4. Props to set on the root node.
//
// By default, PlasmicProjects is wrapped by your project's global
// variant context providers. These wrappers may be moved to
// Next.js Custom App component
// (https://nextjs.org/docs/advanced-features/custom-app).
const ref = React.useRef();
return (
<UnnamedGlobalGroupOfVariantsContext.Provider value={undefined}>
<PlasmicProjectsPage ref={ref} />
</UnnamedGlobalGroupOfVariantsContext.Provider>
);
}
Currently, doing this gives the following error.
I think it might be a good addition to wrap the Plasmic components inside a React.forwardRef
statement. For my personal project, this is currently not super critical. But going forward, I think this might come in handy, eventually...
Hi there,
I'm trying to integrate Plasmic withing my SvelteKit app, and when importing @plasmicapp/loader-svelte
, I've got this error message:
Could not find a declaration file for module '@plasmicapp/loader-svelte'. '/Users/[path]/sveltekit-app-test/node_modules/@plasmicapp/loader-svelte/dist/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/plasmicapp__loader-svelte` if it exists or add a new declaration (.d.ts) file containing `declare module '@plasmicapp/loader-svelte';` ts(7016)
I've tried the command npm i --save-dev @types/plasmicapp__loader-svelte
and got:
Not Found - GET https://registry.npmjs.org/@types%2fplasmicapp__loader-svelte - Not found
This error doesn't prevent Svelte from compiling.
Interestingly: there is no such error when importing @plasmicapp/loader-react
.
EDIT: the workaround exposed here works:
// src/lib/loader-svelte.d.ts
declare module '@plasmicapp/loader-svelte';
Hi Plasmic team,
Looking forward to try Plasmic and was wondering if the Studio can handle i18n (multiple domain routing, can write text in multiple locales etc.) ?
Thanks!
Some user agents can have an additional privacy-enhancing layers that blocks suspicious requests.
In case of Brave browser, with its Shield feature, it blocks localhost requests.
It would be useful to send some instructions to a user when such request is blocked or when loading takes a while. In case of Brave it is as simple as turning Shield down by pressing Brave icon in address bar.
It might save a lot of time and unnecessary concussion collectively.
Wow, I'm completely blown away by Plasmic. Thank you so much for this application!
I am wondering what would be the best way to apply custom CSS styles on an element. In my case, I'm having a simple button and would like to apply a "outline: none" css style, so that the thick outline goes away (which is there by default).
Plasmic doesn't seem to have UI elements to apply this type of style. What would be the best way to apply this style using CSS? It would be great if the style would also apply in Plasmic Studio. I'm using Plasmic using Codegen (NextJS) to a Github repository.
Here are a few things I've tried:
./components/plasmic/testpage/TestComponent.module.css
locally and pushing the changes to the git repository. That didn't work and lead to a merge conflict on the next "pubish"../styles/globals.css
file. The style update is reflected in the deployed version, but not inside Plasmic Studio.I'm confused, does this repo contain the designer UI to build the pages?
Hi!
I tried to enable localization and followed the documentation.
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={plasmicData}
prefetchedQueryData={queryCache}
globalVariants={{ locale }}
>
Type '{ locale: string; }' is not assignable to type 'GlobalVariantSpec[]'.
Object literal may only specify known properties, and 'locale' does not exist in type 'GlobalVariantSpec[].'
Hello!
I've been trying Plasmic but I couldn't build almost anything. I'm blind and my screen reader didn't read me practically any builder buttons. I don't know if the resulting interfaces are accessible either.
Is there a possibility to improve this please?
Thanks
I'm thrilled at the power of Plasmic and trying to move more and more app logic into Plasmic. Now, I'm trying to implement local user state to see how UI changes over time (ie. checkout cart content.)
To do so, I wanted to use Global Context but after reading the doc page, I got confused on two fronts:
I'd be glad to get an answer for these questions and also update the doc accordingly as I think this is a crucial information.
There is an error when trying to "Play Plasmic Levels" or start with a template.
Unexpected error
Error: Loading CSS chunk 12 failed. (/static/css/12.d7d6fc65.chunk.css)
Browser: Firefox 87
Where does it happen? https://studio.plasmic.app/projects/<project_id_removed>
Console log if visiting without logging in:
Rendering app 10.5dfbd6cc.chunk.js:1:2674300
Hello, Uri 10.5dfbd6cc.chunk.js:1:2674300
Source map error: Error: request failed with status 401
Resource URL: https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js
Source Map URL: main.e2fdcd78.chunk.js.map
Ignoring unsupported entryTypes: layout-shift. logger-1.min.js:15:12500
Source map error: Error: request failed with status 401
Resource URL: https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js
Source Map URL: 10.5dfbd6cc.chunk.js.map
Source map error: Error: request failed with status 401
Resource URL: https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js
Source Map URL: 10.5dfbd6cc.chunk.js.map
Rendering app 10.5dfbd6cc.chunk.js:1:2674300
XHRGEThttps://studio.plasmic.app/api/v1/auth/self
[HTTP/2 401 Unauthorized 110ms]
Uncaught (in promise) Error: Loading CSS chunk 12 failed.
(/static/css/12.d7d6fc65.chunk.css)
onerror https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
EventHandlerNonNull*s.e/i[b]< https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
e https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
loader https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
componentDidMount https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
us https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
cu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Yo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
iu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
enqueueSetState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
setState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
componentDidMount https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
us https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
cu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Yo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
iu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
enqueueSetState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
setState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
componentDidMount https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
promise callback*componentDidMount/< https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
promise callback*componentDidMount https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
us https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
cu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
iu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Hu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Zu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
fu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Zu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
render https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
bi https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
831 https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
831 https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
s https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
829 https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
s https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
828 https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
s https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
u https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
e https://studio.plasmic.app/projects/w5Asw5JSTpHpJAu7TAuivN:8
<anonymous> https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:1
w5Asw5JSTpHpJAu7TAuivN:8:2310
Source map error: Error: request failed with status 401
Resource URL: https://studio.plasmic.app/static/js/11.aa3819af.chunk.js
Source Map URL: 11.aa3819af.chunk.js.map
Source map error: Error: request failed with status 401
Resource URL: https://studio.plasmic.app/static/js/12.92db215f.chunk.js
Source Map URL: 12.92db215f.chunk.js.map
Source map error: Error: request failed with status 401
Resource URL: https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js
Source Map URL: main.e2fdcd78.chunk.js.map
Console log if visiting from the https://studio.plasmic.app/ page after logging in:
DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code. 10.5dfbd6cc.chunk.js:1:2674300
DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code. 10.5dfbd6cc.chunk.js:1:2674300
Rendering app 10.5dfbd6cc.chunk.js:1:2674300
Uncaught (in promise) Error: Loading CSS chunk 12 failed.
(/static/css/12.d7d6fc65.chunk.css)
onerror https://studio.plasmic.app/:8
EventHandlerNonNull*s.e/i[b]< https://studio.plasmic.app/:8
e https://studio.plasmic.app/:8
loader https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
componentDidMount https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
us https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
cu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Yo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
iu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
enqueueSetState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
setState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unlisten https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
r https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
notifyListeners https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
notifyListeners https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
j https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
push https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
confirmTransitionTo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
push https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
onClick https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
d https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
d https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
v https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
v https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
at https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ot https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
st https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
pt https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
D https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
B https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Zt https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Kt https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
I https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
r https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
r https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
_wrapEventTarget https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
he https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Yt https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Gt https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ht https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
an https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Qa https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
wu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
bu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
gu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
cu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Ko https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Yo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
iu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
enqueueSetState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
setState https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
componentDidMount https://studio.plasmic.app/static/js/main.e2fdcd78.chunk.js:21
us https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
unstable_runWithPriority https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Wo https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
ku https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
cu https://studio.plasmic.app/static/js/10.5dfbd6cc.chunk.js:1
Saw some forum posts dearh ended.
Is there some way to use chakra ui components wirh plasmic and if so, is there an howto on how to do that?
Wanted to ask on slack but the link in readme seems broken / does not load in slack app🙏
hello folks this project is free to use self hosted ?
thanks you
Is there an easy way to change the placeholder color of input fields? Love the app. Seems to be saving me tons of hours in implementing crazy designs.
It'd be great to have a possibility to use css variables in plasmic so we can dynamically change then on render. Is there any plan for it or is there already a way how to use them?
Hi,
What is the current progress for Svelte / SvelteKit support ?
I tried using @plasmicapp/loader-svelte in a SvelteKit app without success (apparently due to vite).
Thanks !
I tried in both Vite and Vue cli to load plasmic but it won't work without also downloading react.
Then, when I did add react, I no longer had a build error but did received runtime error on requesting the page:
loader-react.esm.js?2a88:1536 Uncaught (in promise) Error: Unable to find components {location.pathname}
at InternalPlasmicComponentLoader._callee3$ (loader-react.esm.js?2a88:1536)
at tryCatch (loader-react.esm.js?2a88:309)
at Generator.invoke [as _invoke] (loader-react.esm.js?2a88:526)
at Generator.eval [as next] (loader-react.esm.js?2a88:362)
at asyncGeneratorStep (loader-react.esm.js?2a88:11)
at _next (loader-react.esm.js?2a88:33)
Is it possible to get plasmic to generate relative paths that honor the base href setting? currently i can't host plasmic rooted on say the /home path of our site.
Error:
git push -u '***github.com/AGF04/raichu.git' 'main'
remote: Permission to AGF04/raichu.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/AGF04/raichu.git/': The requested URL returned error: 403
Error: Command failed: git push -u '***github.com/AGF04/raichu.git' 'main'
remote: Permission to AGF04/raichu.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/AGF04/raichu.git/': The requested URL returned error: 403
CSS class names generated by Plasmic are very long resulting in a larger than necessary network payload and DOM.
Using the plasmic.app/ landing page as an example, here is an excerpt of a single <section>
element:
<section
class="plasmic_default__all plasmic_default__section root_reset_kjuFFTSZb8fanzCHT2C1jz
plasmic_default_styles plasmic_mixins plasmic_tokens plasmic_tokens plasmic_tokens
ValuePropSection__root__xWxy2 ValuePropSection__rootbackgroundColor_blue2__xWxy22MZuk
ValuePropSection__rootextras_centerAligned__xWxy2Twsav
ValuePropSection__rootextras_withExtraSlot1__xWxy2VufcP
__wab_instance IntegrateAnywhereSection__root___7GnNc __wab_instance
CommonLandingPage__integrateAnywhereSection___1RP03"
>
...
</section>
There are many such elements with similar sized class lists nested inside.
There also appears to be many instances where a child element redundantly lists a class that it inherits from its parent (though I'm no CSS expert). For example:
<div class="plasmic_default__all plasmic_default__div ...">
<div class="plasmic_default__all plasmic_default__div ...">
<div class="plasmic_default__all plasmic_default__div ...">
...
</div>
</div>
</div
Analyzing ./index.html further...
If my calculations are correct, if these class names could somehow be hashed to 6 characters (which is what Google uses) that would reduce the total document size by at least 50%.
Are there instructions for self-hosting Plasmic?
The contributor instruction link in README.md is not working.
https://github.com/plasmicapp/plasmic/blob/master/plasmicpkgs/README
Hi 👋
I just setup my new Plasmic App using npx create-plasmic-app
(Next.js + TypeScript + PlasmicApp scheme), everything is well installed. I copy the Simple Light Landing Page, project is published but I have this error on yarn dev
.
And even on yarn build
:
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
info - Compiled successfully
PlasmicLoader: doing a fresh fetch...
info - Collecting page data
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Unknown module @plasmicapp/react-web/skinny
I didn't find any issue related to this yet.
How to fix this?
Next.js has a setting to configure the build/output directory:
https://nextjs.org/docs/api-reference/next.config.js/setting-a-custom-build-directory
... which makes this line in the loader a problem:
My particular case is the use of nx (a monorepo) which builds the deployable in an entirely different directory from the project root/cwd, i.e ./dist/apps/my-project/.next
.
According to the "Legacy API" docs, once upon a time PlasmicLoader supported configuring these directories, but seem to have disappeared post-refactoring for greater abstraction and re-use.
Any plans to restore support for configuring plasmic's cache directory manually, or matching the build directory used by Next?
Hello this is great, how do we integrate into ASP core.
Also how do we build dashboards, figma does not hav that.
After introducing Global Context to my Plasmic project, I added GlobalContextsProvider from <plasmic>/<project>/GlobalContextsProvider
as described in the docs.
However, the file file is broken because it contains empty import at the top:
import * as React from "react";
import { CompNEfAx5FwJ } from ""; // plasmic-import: _nEfAx5FwJ/codeComponent
This bug makes it impossible to use Global Context in codegen project. However, it does work properly in Studio.
Just found Plasmic and it looks really cool, the exact sort of thing I was looking for for my personal website. However, I took a look at the generated output (on the homepage) and it seems to create an excessive number of div elements ("divception") for a given element.
The "sign up" button, which would ideally be a single a
tag:
The div with a couple headers and a button at the top of the page, which would ideally be a single div
tag with h1
, p
, and a
tags as children:
This is also causing Pagespeed Insights to complain:
This greatly increases network payload and makes layout harder to debug for no benefit to the user - I'm not sure I feel comfortable using Plasmic until this is resolved. Maybe as a stopgap solution some sort of html cleaner could be put in front of the output, if that exists?
Within a fresh installation, I'm getting this error:
Here is a step by step to reproduce:
$ 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
// $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
});
<!-- $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>
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'
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)
Originally posted by @arenzel in #18 (comment)
Hi,
We are trying to implement a fancy image slider in Plasmic after designing it in Figma.
(See a preview here: Fancy Slider )
We designed the component state changes in Figma without any issue: by clicking on the bottom navigation links, the user is able to change the state (current slide) of the Slider; this is accomplished in Figma using INTERACTIONS.
After migrating to Plasmic (BTW great product), we tried in vain to implement the state (current slide) change.
How can it be accomplished (even if its requires writing additional code)?
Thanks in advance.
Hi! 👋
I have a grid with multiple cards that I need to customize (provide data like name, description, image, etc.).
With the React API, I could customize it that way:
{
render: (props, Component) => <Component {...props} />;
}
Of course, that doesn’t work in Svelte.
That would be great to make this API also available for Svelte! 🙏
I'd like to ask if I support Flutter in the future
When we use codegen today, the generated files will omit the file extensions when importing files.
However, new ESM modules in TS require relative imports to specify the full file extension
See
https://www.typescriptlang.org/docs/handbook/esm-node.html
relative import paths need full extensions (e.g we have to write import "./foo.js" instead of import "./foo")
It would be useful to have access to page name and path from the context.
Example use case: I want to show shopping cart only when accessing homepage or product page.
I'm trying to create a React library using Plasmic components. This React library will then be published to npm and imported into a separate Next.js application.
Next.js does not support global CSS from node_modules
, which prevents me from using the React library.
See:
vercel/next.js#19936
This is true if I use either the Headless API or Codegen in the React library.
I think it's because Plasmic components import the following file globally
https://github.com/plasmicapp/plasmic/blob/master/packages/react-web/src/styles/plasmic.css
Would it be difficult to move the necessary CSS somewhere else?
Hi there and thank you for your great work on Plasmic.
In the last few days, we experienced randomly occurring errors when trying to "publish" our project. One of our team wasn't able to "publish" at all, lately. When I personally use the "publish" feature, I never experienced any issues. Below are screenshots of some of the error messages we got.
Any help would be much appreciated. Thank you!
Package in plasmicpkgs/chakra-ui is not available via npm. Also, there are two inconsistencies:
@plasmicpkgs/plasmic-chakra-ui
. Given other packages names, I would expect it to be @plasmicpkgs/chakra-ui
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.