Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
@apollo-elements/create
Advanced tools
⚡️ App and Component Generator for Apollo Elements 🚀
🔎 Read the Full API Docs 🔎
To quickly get started with apollo-elements, generate a skeleton app with this command
npm init @apollo-elements
Which will prompt you to generate a full app, or a component thereof.
npm init @apollo-elements -- app
Generate an Apollo Elements Skeleton App
npm init @apollo-elements -- \
app \
--pkg-manager yarn \
--uri '/graphql' \
--install \
--start \
--yes
Flag | Description | type | default |
---|---|---|---|
--help | Show help | boolean | |
--version | Show version number | boolean | |
--pkg-manager | Preferred package manager | npm or yarn | npm |
--uri , -u | URI to your GraphQL endpoint | string | |
--yes , -y | Use default package.json fields (e.g. author, license) | boolean | |
--skip-codegen | Skip the codegen phase | string | false |
--install , -i | Automatically install dependencies | boolean | |
--start , -s | Launch the dev server after scaffolding | boolean |
The generated app comes with plenty of bells-and-whistles:
@web/dev-server
import MyQuery from './My.query.graphql'
import styles from './my-element.css'
These npm scripts help you get your work done in style:
npm start
yarn start
runs the code generator and the development server in watch mode
npm run build
yarn build
bundles the app into /build
. The build will bundle and minify your javascript, and minify your HTML. Just upload to your static file host and you're good.
npm run lint
yarn lint
Lint your app with an opinionated set of rules for JavaScript and TypeScript
npm test
yarn test
The generator currently doesn't offer strong opinions on testing your UI components, so npm test
currently exist with an error code. For unit testing business logic (i.e. typePolicies), we recommend @web/test-runner
npm init @apollo-elements -- component
Generate an Apollo Element
npm init @apollo-elements -- \
component \
--type mutation \
--name x-user-profile \
--subdir user \
--schema-path '#schema' \
--shared-css-path '#components/shared.css' \
--variables '$input: UpdateProfileInput!' \
--fields 'updateProfile(input: $input) { id }' \
--skip-codegen
--yes
Flag | Description | type | default |
---|---|---|---|
--help | Show help | boolean | |
--version | Show version number | boolean | |
--pkg-manager | Preferred package manager | npm or yarn | npm |
--type , -t | Element type | query , mutation , or subscription | query |
--name , -n | Custom element tag name | string | |
--subdir , -d | Optional subdir under src/components | string | |
--yes , -y | Optional subdir under src/components | boolean | false |
--skip-codegen | Skip the codegen phase | boolean | false |
--schema-path | Optional custom path to schema types file | string | |
--shared-css-path | Optional custom path to shared component styles file | string | |
--variables | Optional custom variables e.g. input: $UpdateUserInput | string | |
--fields | Optional custom fields e.g. id name picture { alt url } | string |
FAQs
Scaffold apps and components with GraphQL and Lit
We found that @apollo-elements/create demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.