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

[byCedric]

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.

[wcandillon]

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]

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]

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.

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]

@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.