React Native and packages

import { cs } from "@backtickjs/core";
import { useEffect, useRef } from "@backtickjs/react";
import {
  Animated,
  Linking,
  Platform,
  Pressable,
  Text,
  useWindowDimensions,
  View,
} from "@backtickjs/react-native";
import type { ReactNode } from "react";
// Fades its children in when it appears.
const FadeIn = cs`(props: { children: ReactNode }) => {
  const opacity = $useRef(new $Animated.Value(0)).current;
  $useEffect(() => {
    $Animated
      .timing(opacity, { toValue: 1, duration: 400, useNativeDriver: true })
      .start();
  }, []);
  return <$Animated.View style={{ opacity }}>{props.children}</$Animated.View>;
}`;
type StoreInfo = { name: string; phone: string; address: string };
const StoreCard = cs`(props: StoreInfo) => {
  const { width } = $useWindowDimensions();
  const maps =
    $Platform.OS === "ios"
      ? { label: "Open in Maps", url: "https://maps.apple.com/?q=" }
      : {
          label: "Open in Google Maps",
          url: "https://www.google.com/maps/search/?api=1&query=",
        };
  return (
    <$FadeIn>
      <$View
        style={{
          padding: 24,
          gap: 12,
          flexDirection: width > 600 ? "row" : "column",
        }}
      >
        <$Text style={{ fontSize: 24, fontWeight: "bold" }}>{props.name}</$Text>
        <$Pressable onPress={() => $Linking.openURL("tel:" + props.phone)}>
          <$Text>Call {props.phone}</$Text>
        </$Pressable>
        <$Pressable
          onPress={() =>
            $Linking.openURL(maps.url + encodeURIComponent(props.address))
          }
        >
          <$Text>{maps.label}</$Text>
        </$Pressable>
      </$View>
    </$FadeIn>
  );
}`;
export async function Store() {
  const store: StoreInfo = {
    name: "Backtick Coffee",
    phone: "+15550100",
    address: "1 Main St, Portland",
  };
  return cs`<$StoreCard {...$store} />`;
}

import { createImport } from "@backtickjs/core";
import type { impactAsync as ImpactAsync } from "expo-haptics";
import type { LinearGradient as ExpoLinearGradient } from "expo-linear-gradient";
// What the app provides from these packages, typed as the packages type
// them, for any script to splice.
export const impactAsync = createImport<typeof ImpactAsync>({
  name: "impactAsync",
  from: "expo-haptics",
  version: "~57.0.0",
});
export const LinearGradient = createImport<typeof ExpoLinearGradient>({
  name: "LinearGradient",
  from: "expo-linear-gradient",
  version: "~57.0.0",
});

import { cs } from "@backtickjs/core";
import { Pressable, Text } from "@backtickjs/react-native";
import { impactAsync, LinearGradient } from "./expo.js";
export async function Home() {
  return cs`(
    <$LinearGradient
      colors={["#7c3aed", "#0891b2"]}
      style={{ flex: 1, padding: 24 }}
    >
      <$Pressable onPress={() => $impactAsync()}>
        <$Text style={{ color: "#fff", fontSize: 24 }}>Tap to feel it</$Text>
      </$Pressable>
    </$LinearGradient>
  )`;
}

import { createServer } from "node:http";
import { createRequire } from "node:module";
import { bundler } from "@backtickjs/bundler";
import { Home } from "./Home.js";
// The packages the app provides to screens, each at the version it's built
// with.
const require = createRequire(import.meta.url);
const packageVersions = {
  react: require("react/package.json").version,
  "react-native": require("react-native/package.json").version,
  "expo-haptics": require("expo-haptics/package.json").version,
  "expo-linear-gradient": require("expo-linear-gradient/package.json").version,
};
createServer(async (request, response) => {
  const bundle = await bundler.build({ input: <Home />, packageVersions });
  response.setHeader("content-type", "text/javascript");
  response.end(bundle.generate({ format: "cjs" }).code);
}).listen(3000);

import { evaluate } from "@backtickjs/react-native-client";
import * as ExpoHaptics from "expo-haptics";
import * as ExpoLinearGradient from "expo-linear-gradient";
import * as React from "react";
import * as JSXRuntime from "react/jsx-runtime";
import * as ReactNative from "react-native";
// What a screen may require: the packages this app was built with.
export const modules = {
  react: React,
  "react/jsx-runtime": JSXRuntime,
  "react-native": ReactNative,
  "expo-haptics": ExpoHaptics,
  "expo-linear-gradient": ExpoLinearGradient,
};
export async function fetchScreen(url: string): Promise<React.ReactNode> {
  const response = await fetch(url);
  return evaluate(await response.text(), modules) as React.ReactNode;
}