Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow embedded Snacks to view code other than the App.js file #326

Open
byCedric opened this issue Jul 22, 2022 · 4 comments · May be fixed by #601
Open

Allow embedded Snacks to view code other than the App.js file #326

byCedric opened this issue Jul 22, 2022 · 4 comments · May be fixed by #601
Labels
enhancement New feature or request website

Comments

@byCedric
Copy link
Member

byCedric commented Jul 22, 2022

We'd need a property to set the file to view in an embedded Snack. We need this for Skia, to open Breathe.tsx instead of App.tsx. With that, users can edit the breathe logic to preview it, while still keeping the web-wrapping logic in the entrypoint.

@byCedric byCedric added enhancement New feature or request website labels Jul 22, 2022
@wcandillon
Copy link

This would be huge 🙌🏼

As a side question, would it be possible to create a App.web.tsx file that imports App.tsx so that the snack shows App.tsx with the proper logic?

I tried the following:

import React from 'react';
import { View, Text } from "react-native";
// @ts-expect-error
import { WithSkia } from '@shopify/react-native-skia/dist/web';


const fallback = (
  <View style={{
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }}>
    <Text>Loading Skia...</Text>
  </View>
);

function getComponent () {
  // extension is important to have have an infinite require loop
  return require("./App.tsx");
}

export default function App() {
  return (
    <WithSkia
      fallback={fallback}
      getComponent={getComponent} />
  );
}

but it didn't work

@byCedric
Copy link
Member Author

byCedric commented Aug 1, 2022

I think there are two things here:

  1. I don't think you can do that on the entry point. That's always resolved to App.(TSX?|jsx?), but I might be wrong.
  2. Platform takes precedence over non-platform extensions. Meaning, if you import ./MyComponent.tsx from ./MyComponent.web.tsx, it will try to import itself. .web.tsx has priority over .tsx.

@wcandillon

@robwalkerco
Copy link

robwalkerco commented Aug 15, 2024

We have encountered this same issue.

We are trying to add some Snacks to the Victory Native docs, but as Victory Native is based on Skia, we need to use code-splitting. This means that the actual chart code is not visible in the snack at all, as it's not possible to view anything other than the App.tsx file in an embedded snack.

Screenshot of what the snack would look like on our docs website.
Screenshot 2024-08-15 at 11 13 05

It's only possible to see the code for the chart by opening the snack on the full Expo Snack UI/website by using the icon to the right of the snack name.

Has there been any changes that could allow this (I can't find anything documented)?

@byCedric Is it possible for us to contribute to this repo to add an embed option to specify the displayed file? Any hints on where to start?

@robwalkerco
Copy link

@byCedric I've opened PR #601 to add this feature. I'd love your review, and any suggestions to improve it or correct any issues 🙇

🤞 the contribution can be accepted so that the docs for Victory Native (and perhaps React Native Skia) can be improved with Snacks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request website
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants