✨ Build imports and types automatically

Author: Frontendland

scripts/build.js

@@ -1,4 +1,6 @@
 import fs from 'fs'
+import buildImports from './buildImports.js'
+import buildTypes from './buildTypes.js'
 
 const folders = {
     'src/icons': 'dist/icons',
@@ -7,12 +9,6 @@ const folders = {
 }
 
 const files = {
-    'src/astro.d.ts': 'dist/astro.d.ts',
-    'src/astro.js': 'dist/astro.js',
-    'src/svelte.d.ts': 'dist/svelte.d.ts',
-    'src/svelte.js': 'dist/svelte.js',
-    'src/react.d.ts': 'dist/react.d.ts',
-    'src/react.js': 'dist/react.js',
     'README.md': 'dist/README.md',
     'LICENSE': 'dist/LICENSE',
     'package.json': 'dist/package.json'
@@ -40,4 +36,12 @@ Object.keys(files).forEach(key => {
     })
 })
 
+fs.writeFileSync('dist/astro.js', buildImports('astro'))
+fs.writeFileSync('dist/svelte.js', buildImports('svelte'))
+fs.writeFileSync('dist/react.js', buildImports('tsx'))
+
+fs.writeFileSync('dist/astro.d.ts', buildTypes('astro'))
+fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
+fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
+
 console.log('✅ Package built')

scripts/buildImports.js

@@ -0,0 +1,13 @@
+import fs from 'fs'
+
+const buildImports = extension => {
+    const components = fs.readdirSync('src/components')
+
+    return components.map(component => {
+        return `import ${component}Component from './components/${component}/${component}.${extension}'`
+    }).join('\n')
+        + `\n\n`
+        + components.map(component => `export const ${component} = ${component}Component`).join('\n')
+}
+
+export default buildImports

scripts/buildTypes.js

@@ -0,0 +1,19 @@
+import fs from 'fs'
+
+const buildTypes = type => {
+    const components = fs.readdirSync('src/components')
+
+    return `
+declare module 'webcoreui/${type}' {
+    ${components.map(component => {
+        return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+    }).join('\n\t')}
+
+    ${components.map(component => {
+        return `export function ${component}(_props: ${component}Props): any`
+    }).join('\n\t')}
+}
+    `
+}
+
+export default buildTypes

src/astro.d.ts

@@ -3,7 +3,7 @@ import type { AccordionProps } from './accordion'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
 import './accordion.scss'
 
-export const Accordion = ({ items }: AccordionProps) => {
+const Accordion = ({ items }: AccordionProps) => {
     const [state, setState] = useState(Array(items.length).fill(false))
 
     const toggle = (index: number) => {
@@ -32,3 +32,5 @@ export const Accordion = ({ items }: AccordionProps) => {
         </ul>
     )
 }
+
+export default Accordion

src/astro.js

@@ -2,7 +2,7 @@ import React from 'react'
 import type { ButtonProps } from './button'
 import './button.scss'
 
-export const Button = ({
+const Button = ({
     theme,
     bold,
     href,
@@ -30,3 +30,5 @@ export const Button = ({
         </button>
     )
 }
+
+export default Button

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Card = () => <div />
+
+export default Card

src/components/Button/Button.tsx

@@ -0,0 +1 @@
+export type CardProps = {}

src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import type { IconProps } from './icon'
 
     import Github from '../../icons/github.svg?raw'

src/components/Card/card.ts

@@ -9,7 +9,7 @@ const iconMap = {
     'arrow-down': ArrowDown
 }
 
-export const Icon = ({
+const Icon = ({
     type,
     size = 24,
     color
@@ -22,3 +22,5 @@ export const Icon = ({
 
     return <div dangerouslySetInnerHTML={{ __html: icon }} />
 }
+
+export default Icon

src/components/Icon/Icon.svelte

@@ -4,7 +4,7 @@ import ComponentWrapper from '@static/ComponentWrapper.astro'
 
 import AstroAccordion from '@components/Accordion/Accordion.astro'
 import SvelteAccorion from '@components/Accordion/Accordion.svelte'
-import { Accordion as ReactAccordion } from '@components/Accordion/Accordion.tsx'
+import ReactAccordion from '@components/Accordion/Accordion.tsx'
 
 const accordionItems = [{
     title: 'Do you offer support?',

src/components/Icon/Icon.tsx

@@ -5,7 +5,7 @@ import ComponentWrapper from '@static/ComponentWrapper.astro'
 import Icon from '@components/Icon/Icon.astro'
 import AstroButton from '@components/Button/Button.astro'
 import SvelteButton from '@components/Button/Button.svelte'
-import { Button as ReactButton } from '@components/Button/Button.tsx'
+import ReactButton from '@components/Button/Button.tsx'
 ---
 
 <Layout>