Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@astrojs/react

Package Overview
Dependencies
Maintainers
3
Versions
123
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@astrojs/react - npm Package Compare versions

Comparing version 0.0.0-self-closing-children-20231120173528 to 0.0.0-toolbar-improvements-20240405144822

2

client-v17.js
import { createElement } from 'react';
import { render, hydrate, unmountComponentAtNode } from 'react-dom';
import { hydrate, render, unmountComponentAtNode } from 'react-dom';
import StaticHtml from './static-html.js';

@@ -4,0 +4,0 @@

29

client.js

@@ -18,2 +18,6 @@ import { createElement, startTransition } from 'react';

}
// If the element has no children, we can create a simple React element
if (element.firstChild === null) {
return createElement(element.localName, attrs);
}

@@ -53,2 +57,13 @@ return createElement(

// Keep a map of roots so we can reuse them on re-renders
let rootMap = new WeakMap();
const getOrCreateRoot = (element, creator) => {
let root = rootMap.get(element);
if (!root) {
root = creator();
rootMap.set(element, root);
}
return root;
};
export default (element) =>

@@ -76,12 +91,18 @@ (Component, props, { default: children, ...slotted }, { client }) => {

return startTransition(() => {
const root = createRoot(element);
const root = getOrCreateRoot(element, () => {
const r = createRoot(element);
element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
return r;
});
root.render(componentEl);
element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
});
}
startTransition(() => {
const root = hydrateRoot(element, componentEl, renderOptions);
const root = getOrCreateRoot(element, () => {
const r = hydrateRoot(element, componentEl, renderOptions);
element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
return r;
});
root.render(componentEl);
element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
});
};

4

dist/index.d.ts
import { type Options as ViteReactPluginOptions } from '@vitejs/plugin-react';
import type { AstroIntegration } from 'astro';
export type ReactIntegrationOptions = Pick<ViteReactPluginOptions, 'include' | 'exclude'> & {
export type ReactIntegrationOptions = Pick<ViteReactPluginOptions, 'include' | 'exclude' | 'babel'> & {
experimentalReactChildren?: boolean;
};
export default function ({ include, exclude, experimentalReactChildren, }?: ReactIntegrationOptions): AstroIntegration;
export default function ({ include, exclude, babel, experimentalReactChildren, }?: ReactIntegrationOptions): AstroIntegration;

9

dist/index.js

@@ -35,2 +35,3 @@ import react, {} from "@vitejs/plugin-react";

exclude,
babel,
experimentalReactChildren

@@ -51,3 +52,3 @@ } = {}) {

},
plugins: [react({ include, exclude }), optionsPlugin(!!experimentalReactChildren)],
plugins: [react({ include, exclude, babel }), optionsPlugin(!!experimentalReactChildren)],
resolve: {

@@ -64,3 +65,4 @@ dedupe: ["react", "react-dom", "react-dom/server"]

"redoc",
"use-immer"
"use-immer",
"@material-tailwind/react"
]

@@ -73,2 +75,3 @@ }

exclude,
babel,
experimentalReactChildren

@@ -82,3 +85,3 @@ } = {}) {

updateConfig({
vite: getViteConfiguration({ include, exclude, experimentalReactChildren })
vite: getViteConfiguration({ include, exclude, babel, experimentalReactChildren })
});

@@ -85,0 +88,0 @@ if (command === "dev") {

16

package.json
{
"name": "@astrojs/react",
"description": "Use React components within Astro",
"version": "0.0.0-self-closing-children-20231120173528",
"version": "0.0.0-toolbar-improvements-20240405144822",
"type": "module",

@@ -43,15 +43,13 @@ "types": "./dist/index.d.ts",

"dependencies": {
"@vitejs/plugin-react": "^4.0.4",
"@vitejs/plugin-react": "^4.2.0",
"ultrahtml": "^1.3.0"
},
"devDependencies": {
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"chai": "^4.3.7",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"cheerio": "1.0.0-rc.12",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"vite": "^4.4.9",
"mocha": "^10.2.0",
"astro": "0.0.0-self-closing-children-20231120173528",
"vite": "^5.1.4",
"astro": "0.0.0-toolbar-improvements-20240405144822",
"astro-scripts": "0.0.14"

@@ -75,4 +73,4 @@ },

"dev": "astro-scripts dev \"src/**/*.ts\"",
"test": "mocha --exit --timeout 20000"
"test": "astro-scripts test \"test/**/*.test.js\""
}
}

154

README.md

@@ -5,147 +5,35 @@ # @astrojs/react ⚛️

## Installation
## Documentation
There are two ways to add integrations to your project. Let's try the most convenient option first!
Read the [`@astrojs/react` docs][docs]
### `astro add` command
## Support
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
To install `@astrojs/react`, run the following from your project directory and follow the prompts:
- Submit bug reports and feature requests as [GitHub issues][issues].
```sh
# Using NPM
npx astro add react
# Using Yarn
yarn astro add react
# Using PNPM
pnpm astro add react
```
## Contributing
If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
### Install dependencies manually
- [Contributor Manual][contributing]
- [Code of Conduct][coc]
- [Community Guide][community]
First, install the `@astrojs/react` integration like so:
## License
```sh
npm install @astrojs/react
```
MIT
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'react'" (or similar) warning when you start up Astro, you'll need to install `react` and `react-dom`:
Copyright (c) 2023–present [Astro][astro]
```sh
npm install react react-dom
```
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
```diff lang="js" "react()"
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [react()],
// ^^^^^^^
});
```
## Getting started
To use your first React component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🤝 opportunities to mix and nest frameworks together
## Options
### Combining multiple JSX frameworks
When you are using multiple JSX frameworks (React, Preact, Solid) in the same project, Astro needs to determine which JSX framework-specific transformations should be used for each of your components. If you have only added one JSX framework integration to your project, no extra configuration is needed.
Use the `include` (required) and `exclude` (optional) configuration options to specify which files belong to which framework. Provide an array of files and/or folders to `include` for each framework you are using. Wildcards may be used to include multiple file paths.
We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';
export default defineConfig({
// Enable many frameworks to support all different kinds of components.
// No `include` is needed if you are only using a single JSX framework!
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*'],
}),
],
});
```
### Children parsing
Children passed into a React component from an Astro component are parsed as plain strings, not React nodes.
For example, the `<ReactComponent />` below will only receive a single child element:
```astro
---
import ReactComponent from './ReactComponent';
---
<ReactComponent>
<div>one</div>
<div>two</div>
</ReactComponent>
```
If you are using a library that _expects_ more than one child element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker.
You can set the experimental flag `experimentalReactChildren` to tell Astro to always pass children to React as React vnodes. There is some runtime cost to this, but it can help with compatibility.
You can enable this option in the configuration for the React integration:
```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
// ...
integrations: [
react({
experimentalReactChildren: true,
}),
],
});
```
## Troubleshooting
For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
## Contributing
This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
[astro]: https://astro.build/
[docs]: https://docs.astro.build/en/guides/integrations-guide/react/
[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
[discord]: https://astro.build/chat/
[issues]: https://github.com/withastro/astro/issues
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

1

server-v17.js

@@ -23,2 +23,3 @@ import React from 'react';

if (typeof Component !== 'function') return false;
if (Component.name === 'QwikComponent') return false;

@@ -25,0 +26,0 @@ if (Component.prototype != null && typeof Component.prototype.render === 'function') {

7

server.js
import React from 'react';
import ReactDOM from 'react-dom/server';
import { incrementId } from './context.js';
import StaticHtml from './static-html.js';
import { incrementId } from './context.js';
import opts from 'astro:react:opts';

@@ -25,3 +25,8 @@

if (typeof Component !== 'function') return false;
if (Component.name === 'QwikComponent') return false;
// Preact forwarded-ref components can be functions, which React does not support
if (typeof Component === 'function' && Component['$$typeof'] === Symbol.for('react.forward_ref'))
return false;
if (Component.prototype != null && typeof Component.prototype.render === 'function') {

@@ -28,0 +33,0 @@ return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);

13

vnode-children.js

@@ -1,3 +0,3 @@

import { parse, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml';
import { createElement, Fragment } from 'react';
import { Fragment, createElement } from 'react';
import { DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE, parse } from 'ultrahtml';

@@ -11,7 +11,6 @@ let ids = 0;

function createReactElementFromNode(node) {
const childVnodes = Array.isArray(node.children) && node.children.length
? node.children
.map((child) => createReactElementFromNode(child))
.filter(Boolean)
: undefined;
const childVnodes =
Array.isArray(node.children) && node.children.length
? node.children.map((child) => createReactElementFromNode(child)).filter(Boolean)
: undefined;

@@ -18,0 +17,0 @@ if (node.type === DOCUMENT_NODE) {

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc