Comments (13)
patrickhpan
commented on May 18, 2024
1
The difference to me is that in React it only really makes sense to have one "App" running at any time whereas in Sketch it's highly useful to have multiple "App"s on the same Page to represent different states.
What about a nonstandard render() method that takes an optional third parameter, append, that defaults to true but if false calls
page.addLayers([layer]);
instead of
page.replaceAllLayersWithLayers([layer]);
Thus, you could use
render(<FirstThing />, page)
render(<AlsoOnSamePage />, page, false
to force rendering on the same page?
And rendering one component per page can be done using by calling context.document.removePage(context.currentPage()) enough times to remove all pages, and appending new blank pages into an array, and then rendering one component per page. This hack is here
from react-sketchapp.
kristinbaumann
commented on May 18, 2024
1
@patrickhpan provided a gist to generate multiple artboards within one artboard here: https://gist.github.com/patrickhpan/a47ee004b5c77854be4cbfd29c09be17.
Works quite well for me.
from react-sketchapp.
IlyasM
commented on May 18, 2024
That would be really useful
from react-sketchapp.
patrickhpan
commented on May 18, 2024
Interestingly, the exact same code segment above results in only the last render() working—it looks like each render() replaces the page's existing contents. Is anyone else encountering this? I'm on the latest Sketch (43.2)
I came up with a hack by nesting Artboards within a root Artboard, which seems to work okay. It's here.
from react-sketchapp.
jeroenransijn
commented on May 18, 2024
Super awesome project. This one is key in adoption for me.
from react-sketchapp.
mathieudutour
commented on May 18, 2024
yes, that was the old behaviour which didn't replace the content but append to it. Looks like this should have a higher priority now
from react-sketchapp.
jemgold
commented on May 18, 2024
Sorry, I totally forgot that we changed how render works recently 🙃 - please disregard my initial message.
Previously we appended to the document rather than replacing. This let you hack multiple artboards by rendering twice etc, with the side effect of having to manually clear a document or ending up with tons of duplicate content.
For everything, consider how React would work.
Calling
render(<Thing />, document.getElementById('root'));
render(<Thing />, document.getElementById('root'));
would rerender Thing into root, but you'd only see it once. to see two things, you'd provide a different container
render(<Thing />, document.getElementById('foo'));
render(<Thing />, document.getElementById('bar'));
you don't have to use context.document.currentPage() - consider it ~= rendering directly in to <body>.
equally if you held a reference to a selection or to a group you could render into that - there aren't examples yet because it's kinda fiddly but that's basically the metaphor.
you can also render Artboards inside of Artboards but it's pretty broken, and Sketch won't let you do that by hand so it's going to be glitchy.
I agree with y'all that this is a high priority for me too - hope you can bear with us whilst we find the perfect solution (and let's discuss possible APIs for it here — what would a component that's higher-level than an Artboard be called?)
from react-sketchapp.
jemgold
commented on May 18, 2024
- a separate ~=
renderAndAppendmethod. would avoid cluttering the function signature - a method that instantiates the object but doesn't insert it at all - just returns it for you to do with as you wish.
const layer = renderToObjOrSomething(<Foo /));
context.document.currentPage().addLayers([ layer ]);
- a higher level component like
<Page>or<Canvas>or something that can contain multiple artboards and lays them out with flexbox etc - some helpers to simplify the
render(<Foo />, ANY_TARGET_OTHER_THAN_CURRENT_PAGE)workflow - you have to know some CocoaScript to get it to work, so maybe a simplegetLayerByName('foo')helper would be good to include.
We want to support rerendering as the primary method — it enables livereloading, which was previously tricky, and I think a combination of the above methods will work (because they target slightly different usecases)
from react-sketchapp.
masato-io
commented on May 18, 2024
+1. This one is the key for adoption for me as well.
from react-sketchapp.
houhr
commented on May 18, 2024
+1. This feature is so necessary to compose a page like the Symbols page in Sketch.
from react-sketchapp.
ljharb
commented on May 18, 2024
(general PSA: please use reaction emojis on the original post to indicate support on GitHub rather than posting comments on issue threads)
from react-sketchapp.
fresh5447
commented on May 18, 2024
The hack does work but I don't love it. I thought the point of this project was design scalability? If my current understanding is correct, I can easily swap out which component is being rendered which is fine for development. However, do I now have to save every different (view) Artboard as a different directory/file? Then at the end of the day open up all the single projects and drag and drop to combine them into a single, useful, directory to show a client or the team? This seems too odd to be true, I am really hoping I am misunderstanding the functionality.
from react-sketchapp.
anymost
commented on May 18, 2024
So, how to append an Artboard to page while reserve old Artboards in the same page?
from react-sketchapp.
Related Issues (20)
- Non-uniform border mask path overlaps borderRadius HOT 4
- basic-setup-typescript compile error: No overload matches this definition error: Style typings suspected HOT 1
- Support textTransform capitalize enum HOT 1
- Support fixed position for prototypes HOT 5
- Error in npm install HOT 10
- fontFamily and fontWeight don't work
- Webpack Loader issue when exporting SVGs HOT 1
- Svg import broken HOT 12
- Code examples in the demo section are not-editable HOT 2
- renderToJson broken in 3.2.5 HOT 4
- Question: Does react-sketchapp work with plain react code at all ? HOT 6
- Sketch to JSX HOT 1
- Svg did not rendered as expected HOT 9
- Can't get emotion example to build
- Better Image API Parity with React Native
- Unable to use [email protected] with typescript HOT 1
- Add TestRenderer.act callback function
- import svg to render HOT 7
- see the result from browser HOT 6
- SVG rendering broken in Sketch 85.1 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-sketchapp.