LogoLogo
GithubTwitterDiscordPlayground
English
English
  • ๐Ÿ‘‹Atomico
  • ๐Ÿš€Getting started with Atomico
  • โš›๏ธGetting started with Atomico for React users
  • ๐Ÿ’กWhat can you do with Atomico?
    • You can create amazing webcomponents
    • You can create design systems
    • You can create websites
    • You can create mobile applications
    • You can create web applications
  • API
    • ๐ŸงฌProps(Properties)
      • Value cycle as prop
      • Is it advisable to declare events using the props API?
    • ๐ŸงฉVirtualDOM
      • Advanced
    • ๐ŸŽฃHooks
      • useProp
      • useEvent
      • useRef
      • useHost
      • useState
      • useReducer
      • useEffect, useLayoutEffect and useInsertionEffect
      • useMemo and useCallback
      • useUpdate
      • useId
      • useContext
        • useProvider
      • usePromise
      • useAsync and useSuspense
      • useAbortController
    • ๐Ÿ”ฌTesting
      • Render cycle
      • atomico/test-hooks
      • atomico/test-dom
  • Guides
    • ๐Ÿค”Frequent questions
      • Is it advisable to declare events using the props API?
      • How to declare events for your component at the type level for TSX?
      • When and why to use shadowDom?
      • Can I use Atomico in browsers without ESM support?
    • ๐ŸคฉComponent
      • Naming
      • CSS Styles with Shadow DOM
    • ๐Ÿ›ก๏ธAtomico with Typescript
      • Props
      • Component
      • Meta-types
        • Type
        • Event declaration
        • Method declaration
      • Check the correct use of hooks
    • ๐ŸคAtomico and React
      • Integrating Atomico in React
      • From React to Atomico
        • Rendering Differences
        • VirtualDOM api differences
    • โณAtomico and Asynchrony
    • ๐Ÿง Atomico design patterns
      • โ™ป๏ธWebcomponents with hybrid rendering
      • ๐Ÿ”—Slot as templates
      • ๐Ÿ”€Slot
    • ๐Ÿ“–Atomico and Storybook
      • Frequent questions
    • ๐Ÿ’งSSR / SSG
    • ๐Ÿ—ƒ๏ธArchives
      • Class inheritance
      • Forms and shadowDOM
      • Tips
      • Design systems
      • Atomico style guide
        • File structure
          • Monorepo
          • Design systems
  • packages
    • @atomico/hooks
      • useCurrentValue
      • use-intersection-observer
      • use-ref-values
      • use-script
      • use-attributes
      • use-prop-proxy
      • use-click-press
      • use-dollars
      • use-reflect-event
      • use-keyboar
      • use-click-coordinates
      • use-copy
      • use-debounce-state
      • use-form
      • use-listener
      • use-disabled
      • use-css
      • use-channel
      • use-promise
      • use-responsive-state
      • use-parent
      • use-resize-observer
      • use-slot
        • useSlot
        • useProxySlot
      • use-render
      • use-mutation-observer
      • use-css-light-dom
      • use-controller
      • use-router
      • use-async-effect
      • use-child-nodes
      • use-force-render
    • @atomico/store
      • Store
    • @atomico/storybook
    • @atomico/router
    • @atomico/vite
      • โš™๏ธProcess CSS tag template blocks with PostCSS.
      • ๐Ÿ—๏ธCompile your code to be distributed optimally as a package.
      • ๐Ÿ“•Use the JSX/TSX syntax of Atomico when using Storybook.
      • ๐Ÿค–Automatically create customElements.define
      • โ˜‘๏ธSupport for Vitest for Atomico.
      • ๐Ÿง™โ€โ™‚๏ธServer actions
    • @atomico/exports
      • ๐ŸšฉCLI and Flags
      • ๐Ÿค–Wrapper for React
    • @atomico/components
      • @atomico/keen-slider
      • @atomico/modal
      • @atomico/lottie
      • @atomico/table
    • @atomico/react
    • @atomico/postcss-tokens
      • Example with @atomico/vite
    • @atomico/wrapper
    • ๐ŸšซDeprecated
      • @atomico/magic-form
        • MagicFormProvider | <magic-form-provider>
        • MagicForm | <magic-form>
        • MagicForm Hooks
        • MagicForm in React and Preact
        • MagicForm in Microfrontend
        • MagicForm Patterns
      • @atomico/design-tokens
        • @atomico/design-tokens api
  • Support
    • Discord
    • Github
    • Twitter
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Guides
  2. Archives
  3. Atomico style guide
  4. File structure

Monorepo

The following format is friendly when sharing a webcomponent to NPM using @atomico/exports

โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ define.{js,ts,jsx,tsx}
โ”‚   โ”œโ”€โ”€ elements.{js,ts,jsx,tsx}
โ”‚   โ”œโ”€โ”€ define.test.{js,ts,jsx,tsx}
โ”‚   โ””โ”€โ”€ slots
โ”‚       โ”œโ”€โ”€ my-sub-element-1.{js,jsx,ts,tsx}
โ”‚       โ””โ”€โ”€ my-sub-element-2.{js,jsx,ts,tsx}
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ .npmignore
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ tsconfig.json
    

From the previous structure we highlight:

  1. src/define: import the components from src/elements and declare them as customElements

  2. src/elements: groups and export components as CustomElements

Why separate the export of the element from the declaration?

since it improves the customElements definition experience, example:

import "my-component"; // internalmente define el customTag
import { MyElement } from "my-component/elements"; // no define el customTag

Thanks to @atomico/exports this is really easy, example:

exports src/{define,elements}.{ts,tsx} --exports --types

You can see a use case of this structure in @atomico/components

PreviousFile structureNextDesign systems

Last updated 2 years ago

Was this helpful?

๐Ÿ—ƒ๏ธ
Logocomponents/src/components/table at master ยท atomicojs/componentsGitHub