### Run Development Server with Yarn Start Source: https://github.com/facebookexperimental/recoil/blob/main/packages-ext/todo-example/README.md Starts the development server for the React application. The app will open in the browser at http://localhost:3000 and automatically reload on code edits, displaying lint errors in the console. ```Shell yarn start ``` -------------------------------- ### Build Production App with Yarn Build Source: https://github.com/facebookexperimental/recoil/blob/main/packages-ext/todo-example/README.md Builds the React application for production into the `build` folder. This process optimizes and minifies the code for best performance, making the app ready for deployment. ```Shell yarn build ``` -------------------------------- ### Launch Test Runner with Yarn Test Source: https://github.com/facebookexperimental/recoil/blob/main/packages-ext/todo-example/README.md Launches the interactive test runner for the project. This command allows developers to run tests in watch mode, providing immediate feedback on code changes. ```Shell yarn test ``` -------------------------------- ### Eject Create React App Configuration with Yarn Eject Source: https://github.com/facebookexperimental/recoil/blob/main/packages-ext/todo-example/README.md Removes the single build dependency (Create React App) from the project, copying all configuration files (webpack, Babel, ESLint) directly into the project. This is a one-way operation that grants full control over the project's build configuration, but means the user is responsible for managing these dependencies. ```Shell yarn eject ``` -------------------------------- ### Install Recoil Package Source: https://github.com/facebookexperimental/recoil/blob/main/README.md Instructions for installing the Recoil state management library using popular package managers like npm, yarn, or bower. ```shell npm install recoil ``` ```shell yarn add recoil ``` ```shell bower install --save recoil ``` -------------------------------- ### Parsing JSON with Type Safety using Refine's jsonParser Source: https://github.com/facebookexperimental/recoil/blob/main/README-refine.md This example shows how Refine provides a strongly typed JSON parser. The `jsonParser` function allows you to define the expected structure of JSON data, and if the parsing is successful, you can access the values in a type-safe manner, otherwise, it returns `null`. ```jsx const myParser = jsonParser(array(object({num: number()}))); const result = myParser('[{"num": 1}, {"num": 2}]'); if (result != null) { // we can now access values in num typesafe way assert(result[0].num === 1); } else { // value failed to match parser spec } ``` -------------------------------- ### Integrate RecoilURLSyncJSON for URL State Synchronization Source: https://github.com/facebookexperimental/recoil/blob/main/README-recoil-sync.md This example shows how to integrate the `` component within your `` to enable automatic synchronization of tagged Recoil atoms with the browser URL. By setting `location={{part: 'queryParams'}}`, the atom's state will be persisted to and read from the URL's query parameters, allowing for state initialization from the URL, updates to the URL on state changes, and atom updates from URL changes (e.g., back button). ```jsx function MyApp() { return ( ... ) } ``` -------------------------------- ### Refining Unknown Types with Refine's Assertion and Coercion Source: https://github.com/facebookexperimental/recoil/blob/main/README-refine.md This example demonstrates how to use Refine's `assertion()` and `coercion()` utilities to validate and refine unknown types. `assertion()` will throw an error if the input does not match the expected type, while `coercion()` will return `null` on failure, allowing for graceful error handling. ```jsx const myObjectChecker = object({ numberProperty: number(), stringProperty: optional(string()), arrayProperty: array(number()), }); const myObjectAssertion = assertion(myObjectChecker); const myObject: CheckerReturnType = myObjectAssertion({ numberProperty: 123, stringProperty: 'hello', arrayProperty: [1, 2, 3], }); ``` -------------------------------- ### Define Recoil Atom with Sync Effect for URL Persistence Source: https://github.com/facebookexperimental/recoil/blob/main/README-recoil-sync.md This snippet demonstrates how to define a Recoil atom (`currentUserState`) and attach a `syncEffect` to it. The `syncEffect` is configured with `refine: number()` to ensure type validation and enable synchronization with an external system, specifically the browser URL in this example. ```jsx const currentUserState = atom({ key: 'CurrentUser', default: 0, effects: [ syncEffect({ refine: number() }), ], }); ``` -------------------------------- ### Using Recoil Relay's graphQLSelector for GraphQL Queries in React Source: https://github.com/facebookexperimental/recoil/blob/main/README-recoil-relay.md This example demonstrates how to define a `graphQLSelector` to fetch data using GraphQL with Relay and then consume its value within a React component using Recoil's `useRecoilValue` hook. The selector automatically handles data fetching, caching, and synchronization with the Recoil data-flow graph. ```JSX const userNameQuery = graphQLSelector({ key: 'UserName', environment: myEnvironment, query: graphql` query UserQuery($id: ID!) { user(id: $id) { name } } `, variables: ({get}) => ({id: get(currentIDAtom)}), mapResponse: data => data.user?.name, }); ``` ```JSX function MyComponent() { const userName = useRecoilValue(userNameQuery); return {userName}; } ``` -------------------------------- ### Upgrading Types for Backward Compatibility with Refine's Match and asType Source: https://github.com/facebookexperimental/recoil/blob/main/README-refine.md This snippet illustrates how Refine's `match()` and `asType()` functions can be used to handle different versions or representations of data, allowing for seamless upgrades from previous types to the latest expected version. It demonstrates coercing various input types (object, string, number) into a consistent `{str: string}` format. ```jsx const myChecker: Checker<{str: string}> = match( object({str: string()}), asType(string(), str => ({str: str})), asType(number(), num => ({str: String(num)})), ); const obj1: {str: string} = coercion(myChecker({str: 'hello'})); const obj2: {str: string} = coercion(myChecker('hello')); const obj3: {str: string} = coercion(myChecker(123)); ``` -------------------------------- ### Format Recoil Project Code with Prettier Source: https://github.com/facebookexperimental/recoil/blob/main/CONTRIBUTING.md To ensure consistent code style across the Recoil project, contributors are required to format their code using Prettier. This command runs Prettier on all relevant files in the project. ```Shell yarn format ``` -------------------------------- ### Allow All Web Crawlers Access Source: https://github.com/facebookexperimental/recoil/blob/main/packages-ext/todo-example/public/robots.txt This robots.txt snippet defines a directive that permits all web crawlers (identified by "User-agent: *") to access all paths on the website (indicated by an empty "Disallow:" directive). This is a common configuration for sites that wish to be fully indexed. ```Robots.txt User-agent: * Disallow: ``` -------------------------------- ### Enhance selector getCallback() for state mutations Source: https://github.com/facebookexperimental/recoil/blob/main/CHANGELOG-recoil.md Callbacks obtained from a selector's `getCallback()` method can now perform mutations, refreshes, and transactions on Recoil state. This brings its capabilities into parity with `useRecoilCallback()`, offering greater flexibility for state management. ```APIDOC Selector.getCallback(): ``` -------------------------------- ### Add refresh() to useRecoilCallback() interface Source: https://github.com/facebookexperimental/recoil/blob/main/CHANGELOG-recoil.md The `useRecoilCallback()` interface now includes a `refresh()` method, enabling the refreshing of selector caches directly from callbacks. This provides more granular control over data freshness within Recoil applications. ```APIDOC useRecoilCallback(): refresh(): void Description: Refreshes selector caches. ``` -------------------------------- ### Recoil Project Body Element Styling Source: https://github.com/facebookexperimental/recoil/blob/main/packages-ext/recoil-devtools/src/pages/Popup/Devpanel.html This CSS snippet defines the fundamental styling for the HTML body element. It ensures the body occupies the full viewport width and height, removes default margins, and sets a preferred monospaced font stack. Additionally, it applies font smoothing for improved text rendering. ```CSS body { width: 100% !important; height: 100% !important; margin: 0; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` -------------------------------- ### CSS Styling for Document Body Source: https://github.com/facebookexperimental/recoil/blob/main/packages-ext/recoil-devtools/src/pages/Popup/index.html This CSS rule targets the `body` element, applying fundamental styles for layout and typography. It defines a fixed width, minimum height, zero margin, and a comprehensive font stack for cross-browser compatibility and readability. Additionally, it enables font smoothing for improved text rendering. ```CSS body { width: 760px; min-height: 560px; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` -------------------------------- ### Disable Recoil Duplicate Atom Key Checking Source: https://github.com/facebookexperimental/recoil/blob/main/CHANGELOG-recoil.md This snippet demonstrates how to disable the duplicate atom key checking and logging in Recoil, which can be noisy in environments like Next.js. It can be set directly in application code or via an environment variable for NodeJS environments. ```JavaScript import { RecoilEnv } from 'recoil'; RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false; ``` ```JavaScript process.env.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.