@actualwave/codemirror-lang-react-native 0.1.0

package/index.js

@@ -0,0 +1,614 @@
+import { syntaxTree } from '@codemirror/language';
+
+// Curated completion data. Only `react` and `react-native` are baked in here
+// since every React Native project has them; anything else (expo-image,
+// react-native-safe-area-context, @shopify/react-native-skia, ...) is
+// supplied by the consumer via ReactNativeCompletionConfig.modules and merged
+// on top of these built-ins (see completion.ts's mergeModules).
+//
+// This is a hand-curated subset, not derived from the packages' own .d.ts
+// files — JSX prop types involve unions/generics/extends chains that aren't
+// worth fully modeling for editor completion, and CodeMirror can't validate
+// TypeScript anyway, so a maintained list of the props people actually reach
+// for carries the value at a fraction of the fragility.
+const COMMON_VIEW_PROPS = [
+    "style",
+    "children",
+    "testID",
+    "pointerEvents",
+    "onLayout",
+    "accessible",
+    "accessibilityLabel",
+    "accessibilityRole",
+    "hitSlop",
+];
+const react = {
+    useState: { type: "function", detail: "useState(initialState)" },
+    useEffect: { type: "function", detail: "useEffect(setup, deps?)" },
+    useLayoutEffect: { type: "function", detail: "useLayoutEffect(setup, deps?)" },
+    useMemo: { type: "function", detail: "useMemo(factory, deps)" },
+    useCallback: { type: "function", detail: "useCallback(fn, deps)" },
+    useRef: { type: "function", detail: "useRef(initialValue)" },
+    useContext: { type: "function", detail: "useContext(Context)" },
+    useReducer: { type: "function", detail: "useReducer(reducer, initialState)" },
+    useId: { type: "function", detail: "useId()" },
+    useTransition: { type: "function", detail: "useTransition()" },
+    useDeferredValue: { type: "function", detail: "useDeferredValue(value)" },
+    useImperativeHandle: { type: "function", detail: "useImperativeHandle(ref, createHandle, deps?)" },
+    createContext: { type: "function", detail: "createContext(defaultValue)" },
+    memo: { type: "function", detail: "memo(Component)" },
+    forwardRef: { type: "function", detail: "forwardRef(render)" },
+    Fragment: { type: "type" },
+    StrictMode: { type: "type" },
+};
+const reactNative = {
+    View: { type: "type", props: [...COMMON_VIEW_PROPS] },
+    Text: { type: "type", props: ["style", "children", "numberOfLines", "ellipsizeMode", "onPress", "selectable", "testID"] },
+    ScrollView: {
+        type: "type",
+        props: [
+            ...COMMON_VIEW_PROPS,
+            "contentContainerStyle",
+            "horizontal",
+            "showsVerticalScrollIndicator",
+            "showsHorizontalScrollIndicator",
+            "onScroll",
+            "scrollEventThrottle",
+            "refreshControl",
+            "keyboardShouldPersistTaps",
+        ],
+    },
+    FlatList: {
+        type: "type",
+        props: [
+            "data",
+            "renderItem",
+            "keyExtractor",
+            "style",
+            "contentContainerStyle",
+            "horizontal",
+            "numColumns",
+            "onEndReached",
+            "onEndReachedThreshold",
+            "ListHeaderComponent",
+            "ListFooterComponent",
+            "ListEmptyComponent",
+            "ItemSeparatorComponent",
+            "refreshing",
+            "onRefresh",
+            "getItemLayout",
+        ],
+    },
+    SectionList: {
+        type: "type",
+        props: ["sections", "renderItem", "renderSectionHeader", "keyExtractor", "style", "stickySectionHeadersEnabled"],
+    },
+    Image: { type: "type", props: ["source", "style", "resizeMode", "onLoad", "onError", "defaultSource", "blurRadius"] },
+    ImageBackground: { type: "type", props: ["source", "style", "imageStyle", "resizeMode", "children"] },
+    Pressable: {
+        type: "type",
+        props: ["onPress", "onLongPress", "onPressIn", "onPressOut", "style", "disabled", "hitSlop", "android_ripple", "children"],
+    },
+    TouchableOpacity: { type: "type", props: ["onPress", "onLongPress", "style", "activeOpacity", "disabled", "hitSlop", "children"] },
+    TouchableHighlight: { type: "type", props: ["onPress", "onLongPress", "style", "underlayColor", "disabled", "children"] },
+    TouchableWithoutFeedback: { type: "type", props: ["onPress", "onLongPress", "children"] },
+    TextInput: {
+        type: "type",
+        props: [
+            "value",
+            "defaultValue",
+            "onChangeText",
+            "onSubmitEditing",
+            "onFocus",
+            "onBlur",
+            "placeholder",
+            "placeholderTextColor",
+            "style",
+            "secureTextEntry",
+            "keyboardType",
+            "autoCapitalize",
+            "autoCorrect",
+            "multiline",
+            "numberOfLines",
+            "editable",
+            "maxLength",
+        ],
+    },
+    Switch: { type: "type", props: ["value", "onValueChange", "disabled", "trackColor", "thumbColor", "style"] },
+    Button: { type: "type", props: ["title", "onPress", "color", "disabled", "accessibilityLabel"] },
+    ActivityIndicator: { type: "type", props: ["animating", "color", "size", "style", "hidesWhenStopped"] },
+    Modal: { type: "type", props: ["visible", "animationType", "transparent", "onRequestClose", "presentationStyle", "children"] },
+    SafeAreaView: { type: "type", props: [...COMMON_VIEW_PROPS] },
+    KeyboardAvoidingView: { type: "type", props: [...COMMON_VIEW_PROPS, "behavior", "keyboardVerticalOffset", "enabled"] },
+    StatusBar: { type: "type", props: ["barStyle", "backgroundColor", "hidden", "translucent", "animated"] },
+    Animated: { type: "variable" },
+    StyleSheet: { type: "variable", detail: "StyleSheet.create({...})" },
+    Dimensions: { type: "variable", detail: 'Dimensions.get("window")' },
+    Platform: { type: "variable", detail: "Platform.OS / Platform.select({...})" },
+    Alert: { type: "variable", detail: "Alert.alert(title, message)" },
+    Keyboard: { type: "variable" },
+    Linking: { type: "variable" },
+    Vibration: { type: "variable" },
+    PanResponder: { type: "variable", detail: "PanResponder.create({...})" },
+    LayoutAnimation: { type: "variable" },
+    useColorScheme: { type: "function", detail: "useColorScheme()" },
+    useWindowDimensions: { type: "function", detail: "useWindowDimensions()" },
+};
+const BUILTIN_MODULES = {
+    react,
+    "react-native": reactNative,
+};
+// RN StyleSheet property names → curated enum values (undefined means the
+// value is free-form — a color, number, or dimension — and isn't worth a
+// suggestion list). Deliberately not split by View/Text/Image since a JSX
+// element's own component type isn't cross-referenced when completing inside
+// its style object — a handful of Text-only properties showing up for a View
+// style dict is an acceptable false positive for the simplicity it buys.
+const STYLE_PROPERTIES = {
+    // Flexbox / layout
+    alignContent: ["flex-start", "flex-end", "center", "stretch", "space-between", "space-around"],
+    alignItems: ["flex-start", "flex-end", "center", "stretch", "baseline"],
+    alignSelf: ["auto", "flex-start", "flex-end", "center", "stretch", "baseline"],
+    aspectRatio: undefined,
+    borderBottomWidth: undefined,
+    borderEndWidth: undefined,
+    borderLeftWidth: undefined,
+    borderRightWidth: undefined,
+    borderStartWidth: undefined,
+    borderTopWidth: undefined,
+    borderWidth: undefined,
+    bottom: undefined,
+    columnGap: undefined,
+    direction: ["inherit", "ltr", "rtl"],
+    display: ["flex", "none"],
+    end: undefined,
+    flex: undefined,
+    flexBasis: undefined,
+    flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+    flexGrow: undefined,
+    flexShrink: undefined,
+    flexWrap: ["wrap", "nowrap", "wrap-reverse"],
+    gap: undefined,
+    height: undefined,
+    justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"],
+    left: undefined,
+    margin: undefined,
+    marginBottom: undefined,
+    marginEnd: undefined,
+    marginHorizontal: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    marginStart: undefined,
+    marginTop: undefined,
+    marginVertical: undefined,
+    maxHeight: undefined,
+    maxWidth: undefined,
+    minHeight: undefined,
+    minWidth: undefined,
+    overflow: ["visible", "hidden", "scroll"],
+    padding: undefined,
+    paddingBottom: undefined,
+    paddingEnd: undefined,
+    paddingHorizontal: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    paddingStart: undefined,
+    paddingTop: undefined,
+    paddingVertical: undefined,
+    position: ["absolute", "relative", "static"],
+    right: undefined,
+    rowGap: undefined,
+    start: undefined,
+    top: undefined,
+    width: undefined,
+    zIndex: undefined,
+    // Border / background / shadow
+    backgroundColor: undefined,
+    borderColor: undefined,
+    borderTopColor: undefined,
+    borderBottomColor: undefined,
+    borderLeftColor: undefined,
+    borderRightColor: undefined,
+    borderRadius: undefined,
+    borderTopLeftRadius: undefined,
+    borderTopRightRadius: undefined,
+    borderBottomLeftRadius: undefined,
+    borderBottomRightRadius: undefined,
+    borderStyle: ["solid", "dotted", "dashed"],
+    opacity: undefined,
+    elevation: undefined,
+    shadowColor: undefined,
+    shadowOffset: undefined,
+    shadowOpacity: undefined,
+    shadowRadius: undefined,
+    transform: undefined,
+    // Text
+    color: undefined,
+    fontFamily: undefined,
+    fontSize: undefined,
+    fontStyle: ["normal", "italic"],
+    fontWeight: ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
+    letterSpacing: undefined,
+    lineHeight: undefined,
+    textAlign: ["auto", "left", "right", "center", "justify"],
+    textAlignVertical: ["auto", "top", "bottom", "center"],
+    textDecorationLine: ["none", "underline", "line-through", "underline line-through"],
+    textDecorationColor: undefined,
+    textDecorationStyle: ["solid", "double", "dotted", "dashed"],
+    textShadowColor: undefined,
+    textShadowOffset: undefined,
+    textShadowRadius: undefined,
+    textTransform: ["none", "uppercase", "lowercase", "capitalize"],
+    writingDirection: ["auto", "ltr", "rtl"],
+    // Image
+    resizeMode: ["cover", "contain", "stretch", "repeat", "center"],
+    overlayColor: undefined,
+    tintColor: undefined,
+};
+
+// Walks every ImportDeclaration in the document and builds
+// Map<localName, ImportInfo>. This is the scoping mechanism completion.ts
+// relies on: nothing curated is ever suggested unless its local name is
+// actually present here for the current document.
+function collectImports(state) {
+    const imports = new Map();
+    const doc = state.doc;
+    const tree = syntaxTree(state);
+    tree.iterate({
+        enter(node) {
+            if (node.name !== "ImportDeclaration")
+                return;
+            const stringNode = node.node.getChild("String");
+            if (!stringNode)
+                return;
+            const raw = doc.sliceString(stringNode.from, stringNode.to);
+            const source = raw.slice(1, -1);
+            // Default import: `import Foo from '...'` — a VariableDefinition
+            // directly under ImportDeclaration (not nested in an ImportGroup).
+            for (const child of node.node.getChildren("VariableDefinition")) {
+                imports.set(doc.sliceString(child.from, child.to), { source, imported: "default" });
+            }
+            // Namespace import: `import * as Foo from '...'`.
+            if (node.node.getChild("Star")) {
+                const varDef = node.node.getChild("VariableDefinition");
+                if (varDef)
+                    imports.set(doc.sliceString(varDef.from, varDef.to), { source, imported: "*" });
+            }
+            // Named imports: `import { a, b as c } from '...'`, nested inside an
+            // ImportGroup child.
+            const group = node.node.getChild("ImportGroup");
+            if (!group)
+                return;
+            for (const child of group.getChildren("VariableDefinition")) {
+                // A VariableDefinition directly inside ImportGroup with no sibling
+                // VariableName means no alias — local name === imported name.
+                const name = doc.sliceString(child.from, child.to);
+                imports.set(name, { source, imported: name });
+            }
+            for (const varName of group.getChildren("VariableName")) {
+                // `VariableName as VariableDefinition` — the alias pair.
+                const parent = varName.parent;
+                if (!parent)
+                    continue;
+                const aliasDef = parent.getChildren("VariableDefinition").find((d) => d.from > varName.to);
+                if (!aliasDef)
+                    continue;
+                imports.set(doc.sliceString(aliasDef.from, aliasDef.to), {
+                    source,
+                    imported: doc.sliceString(varName.from, varName.to),
+                });
+            }
+        },
+    });
+    return imports;
+}
+// Finds the nearest enclosing ImportDeclaration, if any — used by the import
+// module-specifier and named-symbol completions, which both need the
+// declaration's own source string regardless of where inside it the cursor
+// currently sits.
+function findImportDeclaration(node) {
+    for (let cur = node; cur; cur = cur.parent) {
+        if (cur.name === "ImportDeclaration")
+            return cur;
+    }
+    return null;
+}
+function getImportSource(state, importDecl) {
+    const stringNode = importDecl.getChild("String");
+    if (!stringNode)
+        return null;
+    const raw = state.doc.sliceString(stringNode.from, stringNode.to);
+    return raw.slice(1, -1);
+}
+// Local/imported names already listed in this ImportDeclaration's own
+// ImportGroup, so the named-symbol completion doesn't re-suggest something
+// the statement already imports.
+function getImportGroupNames(state, importDecl) {
+    const names = new Set();
+    const group = importDecl.getChild("ImportGroup");
+    if (!group)
+        return names;
+    for (const child of group.getChildren("VariableDefinition")) {
+        names.add(state.doc.sliceString(child.from, child.to));
+    }
+    for (const varName of group.getChildren("VariableName")) {
+        names.add(state.doc.sliceString(varName.from, varName.to));
+    }
+    return names;
+}
+
+// Classifies the cursor position relative to the nearest enclosing JSX tag,
+// if any: 'tag-name' when completing the element name itself (right after
+// `<` or `</`), 'attribute-name' when inside an open tag's attribute list,
+// otherwise null (plain expression/statement context).
+function classifyJsxContext(state, pos) {
+    const tree = syntaxTree(state);
+    const node = tree.resolveInner(pos, -1);
+    for (let cur = node; cur; cur = cur.parent) {
+        if (cur.name === "JSXOpenTag" || cur.name === "JSXSelfClosingTag" || cur.name === "JSXStartTag") {
+            const openTag = cur.name === "JSXStartTag" ? cur.parent : cur;
+            if (!openTag)
+                break;
+            const tagIdentifier = openTag.getChild("JSXIdentifier");
+            // Inside the tag name itself (cursor within/immediately after it, and
+            // no attribute has started yet).
+            if (tagIdentifier && pos <= tagIdentifier.to && pos >= tagIdentifier.from) {
+                return { kind: "tag-name", openTag };
+            }
+            if (tagIdentifier && pos < tagIdentifier.from) {
+                return { kind: "tag-name", openTag };
+            }
+            return { kind: "attribute-name", openTag };
+        }
+        if (cur.name === "JSXAttribute") {
+            const openTag = cur.parent;
+            if (openTag)
+                return { kind: "attribute-name", openTag };
+        }
+        // Anything further out than the element itself is a normal
+        // expression/statement context, not a tag we're inside.
+        if (cur.name === "JSXElement" || cur.name === "JSXFragment")
+            break;
+    }
+    return null;
+}
+function getTagName(state, openTag) {
+    const identifier = openTag.getChild("JSXIdentifier");
+    if (!identifier)
+        return null;
+    return state.doc.sliceString(identifier.from, identifier.to);
+}
+const DEFAULT_STYLE_FACTORIES = ["StyleSheet.create"];
+function calleeText(state, call) {
+    const callee = call.firstChild;
+    if (!callee)
+        return null;
+    return state.doc.sliceString(callee.from, callee.to);
+}
+// Detects whether the cursor sits inside a React Native style dictionary:
+// either a JSX `style={{ ... }}` attribute value, or one of the per-key
+// objects passed to `StyleSheet.create({ ... })` (or an equivalent factory
+// name supplied via `styleFactories`). Only the *nearest* enclosing
+// ObjectExpression is considered — the outer object passed to
+// StyleSheet.create has arbitrary developer-chosen keys (its values are the
+// actual style dicts), not style property names itself.
+function findStyleObjectContext(state, pos, styleFactories = DEFAULT_STYLE_FACTORIES) {
+    const tree = syntaxTree(state);
+    for (let cur = tree.resolveInner(pos, -1); cur; cur = cur.parent) {
+        if (cur.name !== "ObjectExpression")
+            continue;
+        const parent = cur.parent;
+        if (parent && parent.name === "JSXEscape") {
+            const attr = parent.parent;
+            if (attr && attr.name === "JSXAttribute") {
+                const idNode = attr.getChild("JSXIdentifier");
+                if (idNode && state.doc.sliceString(idNode.from, idNode.to) === "style") {
+                    return cur;
+                }
+            }
+        }
+        // Nested inside `<factory>({ key: { ← here } })`.
+        if (parent && parent.name === "Property") {
+            const outerObject = parent.parent;
+            if (outerObject && outerObject.name === "ObjectExpression") {
+                const argList = outerObject.parent;
+                if (argList && argList.name === "ArgList") {
+                    const call = argList.parent;
+                    if (call && call.name === "CallExpression") {
+                        const text = calleeText(state, call);
+                        if (text && styleFactories.includes(text))
+                            return cur;
+                    }
+                }
+            }
+        }
+        // Only the nearest enclosing ObjectExpression is ever a candidate.
+        break;
+    }
+    return null;
+}
+function classifyStylePosition(state, pos, objectExpression) {
+    for (const property of objectExpression.getChildren("Property")) {
+        if (pos < property.from || pos > property.to)
+            continue;
+        const colon = property.getChild(":");
+        const propDef = property.getChild("PropertyDefinition");
+        const propertyName = propDef ? state.doc.sliceString(propDef.from, propDef.to) : undefined;
+        if (colon && pos > colon.to) {
+            return { kind: "value", objectExpression, property, propertyName };
+        }
+        return { kind: "name", objectExpression, property };
+    }
+    return { kind: "name", objectExpression };
+}
+function getExistingStyleKeys(state, objectExpression) {
+    const keys = new Set();
+    for (const property of objectExpression.getChildren("Property")) {
+        const propDef = property.getChild("PropertyDefinition");
+        if (propDef)
+            keys.add(state.doc.sliceString(propDef.from, propDef.to));
+    }
+    return keys;
+}
+
+function mergeModules(config) {
+    if (!(config === null || config === void 0 ? void 0 : config.modules))
+        return BUILTIN_MODULES;
+    return Object.assign(Object.assign({}, BUILTIN_MODULES), config.modules);
+}
+function resolveEntry(modules, source, localName, imported) {
+    const moduleExports = modules[source];
+    if (!moduleExports)
+        return null;
+    const exportedName = imported === "default" || imported === "*" ? localName : imported;
+    const entry = moduleExports[exportedName];
+    return entry ? { entry, exportedName } : null;
+}
+const IDENTIFIER_WORD = /[A-Za-z_$][\w$]*$/;
+const MODULE_SPECIFIER_WORD = /[\w@/.-]*$/;
+const STYLE_VALUE_WORD = /[\w-]*$/;
+function completeImportModuleSpecifier(context, modules) {
+    const word = context.matchBefore(MODULE_SPECIFIER_WORD);
+    const from = word ? word.from : context.pos;
+    const options = Object.keys(modules).map((name) => ({ label: name, type: "namespace" }));
+    return { from, options, validFor: MODULE_SPECIFIER_WORD };
+}
+function completeImportSymbols(context, importDecl, modules) {
+    const source = getImportSource(context.state, importDecl);
+    if (!source)
+        return null;
+    const moduleExports = modules[source];
+    if (!moduleExports)
+        return null;
+    const alreadyImported = getImportGroupNames(context.state, importDecl);
+    const word = context.matchBefore(IDENTIFIER_WORD);
+    const from = word ? word.from : context.pos;
+    const options = Object.entries(moduleExports)
+        .filter(([name]) => !alreadyImported.has(name))
+        .map(([name, entry]) => ({
+        label: name,
+        type: entry.type === "function" ? "function" : entry.type === "type" ? "class" : "variable",
+        detail: entry.detail || source,
+    }));
+    if (!options.length)
+        return null;
+    return { from, options, validFor: /^[\w$]*$/ };
+}
+function completeStyleProperty(context, styleFactories) {
+    var _a;
+    const objectExpression = findStyleObjectContext(context.state, context.pos, styleFactories);
+    if (!objectExpression)
+        return null;
+    const position = classifyStylePosition(context.state, context.pos, objectExpression);
+    if (position.kind === "value") {
+        const values = position.propertyName ? STYLE_PROPERTIES[position.propertyName] : undefined;
+        if (!values)
+            return null;
+        const valueNode = (_a = position.property) === null || _a === void 0 ? void 0 : _a.getChild("String");
+        const insideString = !!valueNode && context.pos > valueNode.from && context.pos <= valueNode.to;
+        const word = context.matchBefore(STYLE_VALUE_WORD);
+        const from = word ? word.from : context.pos;
+        const options = insideString
+            ? values.map((v) => ({ label: v, type: "constant" }))
+            : values.map((v) => ({ label: v, type: "constant", apply: `'${v}'` }));
+        return { from, options, validFor: STYLE_VALUE_WORD };
+    }
+    const existing = getExistingStyleKeys(context.state, objectExpression);
+    const word = context.matchBefore(IDENTIFIER_WORD);
+    const from = word ? word.from : context.pos;
+    const options = Object.keys(STYLE_PROPERTIES)
+        .filter((name) => !existing.has(name))
+        .map((name) => ({ label: name, type: "property" }));
+    return { from, options, validFor: /^[\w$]*$/ };
+}
+/**
+ * Builds the React/React Native contextual CompletionSource: import-scoped
+ * hook/component/prop suggestions, JSX tag-name and attribute-name
+ * completion, RN style dictionary property/value completion (inside
+ * `style={{ }}` or `StyleSheet.create({ ... })`), and import statement
+ * completion (module specifiers, then that module's exports).
+ *
+ * Nothing from `modules` is ever suggested as a hook/component/prop unless
+ * its local name is actually present in the current document's own import
+ * statements — this is the scoping rule the completion source is built
+ * around, not an incidental detail.
+ */
+function reactNativeCompletionSource(config) {
+    var _a;
+    const modules = mergeModules(config);
+    const styleFactories = ((_a = config === null || config === void 0 ? void 0 : config.styleFactories) === null || _a === void 0 ? void 0 : _a.length)
+        ? [...new Set([...config.styleFactories, "StyleSheet.create"])]
+        : ["StyleSheet.create"];
+    return (context) => {
+        const { state, pos } = context;
+        const tree = syntaxTree(state);
+        const node = tree.resolveInner(pos, -1);
+        const importDecl = findImportDeclaration(node);
+        if (importDecl) {
+            const stringNode = importDecl.getChild("String");
+            if (stringNode && pos >= stringNode.from && pos <= stringNode.to) {
+                return completeImportModuleSpecifier(context, modules);
+            }
+            if (importDecl.getChild("ImportGroup")) {
+                return completeImportSymbols(context, importDecl, modules);
+            }
+        }
+        const styleResult = completeStyleProperty(context, styleFactories);
+        if (styleResult)
+            return styleResult;
+        const imports = collectImports(state);
+        if (imports.size === 0)
+            return null;
+        const jsxContext = classifyJsxContext(state, pos);
+        if (jsxContext && jsxContext.kind === "tag-name") {
+            const word = context.matchBefore(IDENTIFIER_WORD);
+            const from = word ? word.from : pos;
+            const options = [];
+            for (const [localName, importInfo] of imports) {
+                const found = resolveEntry(modules, importInfo.source, localName, importInfo.imported);
+                if (found && found.entry.type === "type") {
+                    options.push({ label: localName, type: "class", detail: found.entry.detail || importInfo.source });
+                }
+            }
+            if (!options.length)
+                return null;
+            return { from, options, validFor: /^[\w$]*$/ };
+        }
+        if (jsxContext && jsxContext.kind === "attribute-name") {
+            const tagName = getTagName(state, jsxContext.openTag);
+            if (!tagName)
+                return null;
+            const importInfo = imports.get(tagName);
+            if (!importInfo)
+                return null;
+            const found = resolveEntry(modules, importInfo.source, tagName, importInfo.imported);
+            if (!found || !found.entry.props)
+                return null;
+            const word = context.matchBefore(IDENTIFIER_WORD);
+            const from = word ? word.from : pos;
+            const options = found.entry.props.map((prop) => ({ label: prop, type: "property" }));
+            return { from, options, validFor: /^[\w$]*$/ };
+        }
+        // General scope: offer every imported hook/variable/component by name,
+        // e.g. `useSta|` outside any JSX.
+        const word = context.matchBefore(IDENTIFIER_WORD);
+        if (!word || (word.from === word.to && !context.explicit))
+            return null;
+        const options = [];
+        for (const [localName, importInfo] of imports) {
+            const found = resolveEntry(modules, importInfo.source, localName, importInfo.imported);
+            if (!found)
+                continue;
+            options.push({
+                label: localName,
+                type: found.entry.type === "function" ? "function" : found.entry.type === "type" ? "class" : "variable",
+                detail: found.entry.detail || importInfo.source,
+            });
+        }
+        if (!options.length)
+            return null;
+        return { from: word.from, options, validFor: /^[\w$]*$/ };
+    };
+}
+
+export { BUILTIN_MODULES, STYLE_PROPERTIES, classifyJsxContext, classifyStylePosition, collectImports, findImportDeclaration, findStyleObjectContext, getExistingStyleKeys, getImportGroupNames, getImportSource, getTagName, reactNativeCompletionSource };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@actualwave/codemirror-lang-react-native",
+  "version": "0.1.0",
+  "description": "React / React Native contextual completion (hooks, components, props, style properties, import clauses) for CodeMirror 6",
+  "keywords": [
+    "codemirror",
+    "codemirror6",
+    "react",
+    "react-native",
+    "autocomplete",
+    "completion"
+  ],
+  "author": "Oleg Galaburda <burdiuz@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/burdiuz/codemirror-lang-react-native.git"
+  },
+  "bugs": {
+    "url": "https://github.com/burdiuz/codemirror-lang-react-native/issues"
+  },
+  "homepage": "https://github.com/burdiuz/codemirror-lang-react-native#readme",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "publishConfig": {
+    "directory": "dist"
+  },
+  "type": "module",
+  "main": "index.cjs",
+  "module": "index.js",
+  "exports": {
+    "types": "./types/index.d.ts",
+    "import": "./index.js",
+    "require": "./index.cjs"
+  },
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "peerDependencies": {
+    "@codemirror/autocomplete": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@lezer/common": "^1.0.0"
+  },
+  "devDependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/language": "^6.10.0",
+    "@codemirror/state": "^6.4.0",
+    "@lezer/common": "^1.2.0",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/node": "^24.1.0",
+    "rollup": "^4.45.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
+  },
+  "license": "MIT"
+}