docs(api-reference): [core] supplement docs

Author: akinoccc

docs/.vitepress/config.mts

@@ -29,13 +29,13 @@ export default defineConfig({
         'copy-error': '复制失败',
       },
     },
-
+    
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/basic/quick-start' },
     ],
-
+    
     sidebar: [
       {
         text: 'Basic',
@@ -51,8 +51,15 @@ export default defineConfig({
         text: 'Advances',
         items: [{ text: 'Theming', link: '/guide/advances/theming' }],
       },
+      {
+        text: 'API',
+        items: [
+          { text: 'Core', link: '/guide/api/core' },
+          { text: 'Utils', link: '/guide/api/utils' },
+        ],
+      },
     ],
-
+    
     socialLinks: [{ icon: 'github', link: 'https://github.com/vue-styled-components/vue3-styled-components' }],
   },
   markdown: {

docs/api-examples.md

@@ -0,0 +1,68 @@
+---
+outline: deep
+---
+
+# Core
+
+### `styled`
+
+It is a factory function.
+
+#### Properties
+
+| Properties | Description                                                                                                                              |
+|------------|------------------------------------------------------------------------------------------------------------------------------------------|
+| HTML Tag   | See [Supported HTML Tags](https://github.com/vue-styled-components/vue3-styled-components/blob/master/package/constants/domElements.ts). |
+| attrs      | Pass attrs for styled component.                                                                                                         |
+
+#### Arguments
+
+| Params           | Type                    |
+|------------------|-------------------------|
+| Tag Name         | `SupportedHTMLElements` |
+| Props Definition | `Record<string, any>`   |
+
+#### Return
+
+- `Tag Function`, used to create a styled component.
+
+#### Usage
+
+:::demo
+
+```vue
+
+<script setup>
+  import { styled } from '@vue3-styled-components/package'
+
+  const StyledDiv = styled('div', { color: String })`
+    width: 100%;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #6a488f;
+    text-align: center;
+    line-height: 100px;
+    color: ${props => props.color};
+  `
+</script>
+
+<template>
+  <StyledDiv color="#fff">Hi, I'm styled component.🥺</StyledDiv>
+</template>
+```
+
+:::
+
+### `.arrts`
+
+It is used for passing attributes to styled component.
+
+#### Arguments
+
+| Params       | Type                               |
+|--------------|------------------------------------|
+| Attrs Object | `Record<string, number \| string>` |
+
+#### Return
+
+- `Tag Function`, used to create a styled component.

docs/guide/api/core.md

@@ -0,0 +1,3 @@
+---
+outline: deep
+---

docs/guide/api/utils.md

@@ -12,7 +12,7 @@ hero:
   actions:
     - theme: brand
       text: Get started
-      link: /markdown-examples
+      link: /guide/basic/quick-start
     - theme: alt
       text: View on Github
       link: https://github.com/vue-styled-components/vue3-styled-components

docs/index.md

@@ -0,0 +1,21 @@
+import type { ExpressionsType } from '@/utils'
+import { defineComponent, h } from 'vue'
+import { generateComponentName, insertExpressions } from '@/utils'
+import { injectStyle } from '@/utils/injectStyle'
+
+export const createGlobalStyle = (styles: TemplateStringsArray, ...expressions: ExpressionsType) => {
+  return defineComponent(
+    (_, { attrs }) => {
+      const cssStringsWithExpression = insertExpressions(styles, expressions)
+      injectStyle('global', cssStringsWithExpression, attrs)
+      return () => {
+        return h('div', { style: 'display: none' })
+      }
+    },
+    {
+      name: generateComponentName('global'),
+      inheritAttrs: true,
+      styled: true
+    } as any
+  )
+}

docs/markdown-examples.md

@@ -0,0 +1,5 @@
+import { ExpressionsType, insertExpressions } from '@/utils'
+
+export function css(strings: TemplateStringsArray, ...interpolations: ExpressionsType) {
+  return insertExpressions(strings, interpolations)
+}

package/helper/create-global-style.ts

@@ -0,0 +1,5 @@
+export * from './withAttrs'
+export * from './is'
+export * from './create-global-style'
+export * from './keyframes'
+export * from './css'

package/helper/css.ts

@@ -9,5 +9,9 @@ export function isStyledComponent(target: any) {
 }
 
 export function isVueComponent(target: any) {
-  return target && (typeof target.render === 'function' || typeof target.template === 'string')
+  return target && (typeof target.setup === 'function' || typeof target.render === 'function' || typeof target.template === 'string')
+}
+
+export function isValidElementType(target: any) {
+  return isTag(target) || isStyledComponent(target) || isVueComponent(target)
 }