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

feat: add dynamic content loader #39

Merged
merged 7 commits into from Mar 24, 2020
Merged

feat: add dynamic content loader #39

merged 7 commits into from Mar 24, 2020

Conversation

@darcien
Copy link
Contributor

darcien commented Mar 24, 2020

Okay, this is harder than what I initially thought.

The most problematic part is where we can't do dynamic import with metro.

Doing require(localPathFromYaml) won't work without some hacks.

In this PR, I added yarn codegen to generate index of content.
Then we can do lookup from the index instead of calling require().

Added deps:

  • js-yaml and the types to mirror the ionic WHO app.
  • expo-assets to load bundled assets.

Didn't want to add ts-node or babel config for the scripts, so the scripts are in JS.

Related to #37

darcien added 7 commits Mar 24, 2020
@darcien darcien requested a review from sstur Mar 24, 2020
@darcien

This comment has been minimized.

Copy link
Contributor Author

darcien commented Mar 24, 2020

/cc @sstur I think you might be familiar with the codegen scripts 😆

@darcien

This comment has been minimized.

Copy link
Contributor Author

darcien commented Mar 24, 2020

Example usage of the helper, tested on all platforms.

import useDynamicFlow from './helpers/useDynamicFlow';
import getLocalAsset from './helpers/getLocalAsset';


  // in component
  let loaded = useDynamicFlow('check-your-health');
  let [uri, setUri] = useState<null | string>(null);

  useEffect(() => {
    if (loaded && loaded.content?.screens[0]?.type === 'TextImage') {
      getLocalAsset(
        loaded.imgPrefix,
        loaded.content.screens[0].bottomImageUri ?? '',
      ).then((asset) => {
        setUri(asset.uri);
      });
    }
  }, [loaded]);

  return (
    uri && (
      <Image
        source={{
          uri,
          width: 100,
          height: 100,
        }}
      />
    )
  );
@@ -14,13 +14,16 @@
"test": "yarn lint && yarn typecheck && yarn format:check && yarn jest",
"eject": "expo eject",
"deploy": "gh-pages -d web-build",
"predeploy": "expo build:web"
"predeploy": "expo build:web",
"codegen": "node ./scripts/codegen"

This comment has been minimized.

Copy link
@darcien

darcien Mar 24, 2020

Author Contributor

Probably need at least node v10 for this

@sstur
sstur approved these changes Mar 24, 2020
Copy link
Member

sstur left a comment

Nice work Prof!

@sstur sstur added approved and removed ready for review labels Mar 24, 2020
@darcien darcien merged commit ae81487 into master Mar 24, 2020
1 check passed
1 check passed
build
Details
@darcien darcien deleted the feat/dynamic-content branch Mar 24, 2020
@darcien darcien mentioned this pull request Mar 24, 2020
2 of 3 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.