rewrite snackplayer with remark plugin

[darshkpatel]

Note: Merge #3 before this PR ( Branched from #3 )
I've re-written the snackpayer because v2 supports remark plugin instead of remarkable plugin

[darshkpatel]

hey where did the deploy previews disappear : /

[teikjun]

I'm not sure either 🤔

[darshkpatel]

Do note the showcase, versions, and landing page won't work in this branch as of now.
Will be fixed in a separate PR upgrading these pages

[slorber]

should we add quotes there?

[darshkpatel]

Yup, basically the plugin injects HTML in place of the SnackPlayer code blocks so
data-snack-description="${description}" will be data-snack-description="Description of the snackplayer" in the page

[slorber]

I mean data-snack-supported-platforms specifically does not have quotes will the others have, is it normal?

[darshkpatel]

Added them in 574838e

[darshkpatel]

SnackPlayers work only after a refresh due to other scripts not being migrated ( eg. tabs.js ), and the page disappears on refresh when on prod, use the dev server to view it. I'm looking into fixes

[teikjun]

Possibly related issue: SnackPlayers within Docusaurus tabs disappear after switching tabs:
e.g. https://deploy-preview-4--react-native-website-migration.netlify.app/docs/next/
I'm looking into this as well

[slorber]

Thanks,

There should be a call like windon.ExpoSnack.initialize(); or windon.ExpoSnack.append(domNode,options); to put somewhere :)

https://snack.expo.io/embed.js

Docusaurus v2 is more "lazy", I think only the first tab is in the DOM on first render, and on navigation the dom ready events don't wire again.

[darshkpatel]

There should be a call like windon.ExpoSnack.initialize(); or windon.ExpoSnack.append(domNode,options); to put somewhere :)

It's present in codeblock.js

[darshkpatel]

Docusaurus v2 is more "lazy", I think only the first tab is in the DOM on first render, and on navigation the dom ready events don't wire again.

Might be the reason why snackplayer load on reload, any suggestions on where to put the ExpoSnack initialize call?

[slorber]

I'm not sure, this must be called on navigation + on tab switch :)

Maybe it's the remark plugin that should add an inline <script> just after the snack player div?

I've seen this PR but not sure if it has ever been used nor documented: facebook/docusaurus#1591
(It would solve the nav problem but not the tab switch problem anyway)

@yangshun do you think it's a good usecase for the onRouteUpdate?

[slorber]

Look at the google analytics plugin to see an example usage of onRouteUpdate

[Simek]

One more thing that need to be implemented is SnackPlayer theme sync with Docusaurus theme. I have asked Expo related person about the tip or guidance how this can be achieved.

[Simek]

@darshkpatel Can you extract the tabs changes to the separate PR? It would be nice to have them on dev branch. 🙂

[darshkpatel]

@darshkpatel Can you extract the tabs changes to the separate PR? It would be nice to have them on dev branch. 🙂

If I'm not mistaken, you're referring to
8c661bb, 137276f and e5db801
I believe @teikjun just pushed them as a PoC and the changes are made only to a couple of files

[Simek]

@darshkpatel Yup, you're right. I don't know why this coded ended here but I have created very simple issue about the tabs #20.

Also on the SnackPlayer topic - it should not be available on mobile platforms (code block with the correct highlight should be rendered instead of it):

• https://github.com/react-native-website-migration/react-native-website/blob/dev/website/static/js/codeblocks.js

[darshkpatel]

Just a head's up, I'm currently working on a general Remark Plugin for SnackPlayer as discussed.

[darshkpatel]

Closing in favor of #31