├── .eslintignore ├── .gitignore ├── .prettierrc ├── examples ├── nested-providers │ ├── .prettierrc │ ├── src │ │ ├── Panel │ │ │ ├── index.ts │ │ │ ├── Panel.tsx │ │ │ └── panel.context.ts │ │ ├── main.ts │ │ ├── theme.context.ts │ │ └── App.tsx │ ├── .eslintrc │ ├── sandbox.config.json │ ├── vite.config.ts │ ├── index.html │ ├── README.md │ ├── tsconfig.json │ ├── package.json │ └── pnpm-lock.yaml ├── overriding-providers │ ├── .prettierrc │ ├── src │ │ ├── main.ts │ │ └── App.tsx │ ├── .eslintrc │ ├── sandbox.config.json │ ├── vite.config.ts │ ├── index.html │ ├── README.md │ ├── tsconfig.json │ └── package.json └── theme-context-provider │ ├── .prettierrc │ ├── src │ ├── main.ts │ └── App.tsx │ ├── .eslintrc │ ├── sandbox.config.json │ ├── vite.config.ts │ ├── index.html │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── src ├── index.ts ├── interfaces.ts └── createContext.ts ├── .eslintrc ├── tsconfig.json ├── CHANGELOG.md ├── LICENSE ├── .github └── workflows │ └── release.yml ├── rollup.config.ts ├── package.json ├── README.md └── pnpm-lock.yaml /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | "@fansy/prettier-config" 2 | -------------------------------------------------------------------------------- /examples/nested-providers/.prettierrc: -------------------------------------------------------------------------------- 1 | "@fansy/prettier-config" 2 | -------------------------------------------------------------------------------- /examples/nested-providers/src/Panel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Panel'; -------------------------------------------------------------------------------- /examples/overriding-providers/.prettierrc: -------------------------------------------------------------------------------- 1 | "@fansy/prettier-config" 2 | -------------------------------------------------------------------------------- /examples/theme-context-provider/.prettierrc: -------------------------------------------------------------------------------- 1 | "@fansy/prettier-config" 2 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './createContext'; 2 | export * from './interfaces'; -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@fansy/eslint-config"], 3 | "parserOptions": { 4 | "sourceType": "module" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/nested-providers/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App'; 3 | createApp(App).mount('#app'); 4 | -------------------------------------------------------------------------------- /examples/overriding-providers/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App'; 3 | createApp(App).mount('#app'); 4 | -------------------------------------------------------------------------------- /examples/theme-context-provider/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App'; 3 | createApp(App).mount('#app'); 4 | -------------------------------------------------------------------------------- /examples/nested-providers/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@fansy/eslint-config"], 3 | "parserOptions": { 4 | "sourceType": "module" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/overriding-providers/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@fansy/eslint-config"], 3 | "parserOptions": { 4 | "sourceType": "module" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/theme-context-provider/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@fansy/eslint-config"], 3 | "parserOptions": { 4 | "sourceType": "module" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/nested-providers/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": true, 4 | "view": "browser", 5 | "container": { 6 | "node": "14" 7 | }, 8 | "startScript": "dev" 9 | } 10 | -------------------------------------------------------------------------------- /examples/overriding-providers/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": true, 4 | "view": "browser", 5 | "container": { 6 | "node": "14" 7 | }, 8 | "startScript": "dev" 9 | } 10 | -------------------------------------------------------------------------------- /examples/theme-context-provider/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": true, 4 | "view": "browser", 5 | "container": { 6 | "node": "14" 7 | }, 8 | "startScript": "dev" 9 | } 10 | -------------------------------------------------------------------------------- /examples/nested-providers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import vueJsx from '@vitejs/plugin-vue-jsx'; 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/overriding-providers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import vueJsx from '@vitejs/plugin-vue-jsx'; 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/theme-context-provider/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import vueJsx from '@vitejs/plugin-vue-jsx'; 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/nested-providers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vc-state-theming 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/overriding-providers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vc-state-theming 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/theme-context-provider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ThemeContextProvider 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "esnext", 5 | "outDir": "dist", 6 | "esModuleInterop": true, 7 | "strict": true, 8 | "moduleResolution": "node", 9 | "resolveJsonModule": true, 10 | "baseUrl": "." 11 | }, 12 | "include": ["src/**/*"], 13 | "exclude": ["dist", "node_modules", "**/node_modules/*"] 14 | } 15 | -------------------------------------------------------------------------------- /examples/nested-providers/src/theme.context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'vc-state'; 2 | import { ref } from 'vue'; 3 | 4 | export type Theme = 'dark' | 'light'; 5 | 6 | const [ThemeContextProvider, useThemeContext] = createContext(() => { 7 | const theme = ref('dark'); 8 | const toggleTheme = () => (theme.value = theme.value === 'dark' ? 'light' : 'dark'); 9 | return { theme, toggleTheme }; 10 | }); 11 | 12 | export { ThemeContextProvider, useThemeContext }; 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## v1.2.0 2 | 3 | - 🚀 Allows custom displayName for `Provider` ([#2](https://github.com/fanhaoyuan/vc-state/pull/2)) 4 | 5 | ## v1.1.0 6 | 7 | - 🚀 Can read props in hooks selector 8 | - 🔧 add `VContextProvider` alias to `FunctionalComponent` 9 | 10 | ## v1.0.0 11 | 12 | - 🚀 createContext using Provider Component and context dispatcher 13 | 14 | ## v0.1.1 15 | 16 | ### types 17 | 18 | - 🔧 Refactor types of global context. 19 | 20 | ## v0.1.0 21 | 22 | ### features 23 | 24 | - 🚀 add `createContext` 25 | -------------------------------------------------------------------------------- /examples/nested-providers/README.md: -------------------------------------------------------------------------------- 1 | # NestedProviders 2 | 3 | A simple nested context providers example using vc-state 4 | 5 | ## quick start 6 | 7 | ### locally 8 | 9 | ```bash 10 | >$ git clone https://github.com/fanhaoyuan/vc-state.git && cd examples/nested-providers 11 | >$ pnpm install 12 | >$ pnpm dev 13 | ``` 14 | 15 | Open browser and visit [http://localhost:5173](http://localhost:5173) 16 | 17 | ### codeSandbox 18 | 19 | Visit [NestedProviders](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/nested-providers) 20 | -------------------------------------------------------------------------------- /examples/overriding-providers/README.md: -------------------------------------------------------------------------------- 1 | # OverridingProviders 2 | 3 | A simple overriding context providers example using vc-state 4 | 5 | ## quick start 6 | 7 | ### locally 8 | 9 | ```bash 10 | >$ git clone https://github.com/fanhaoyuan/vc-state.git && cd examples/overriding-providers 11 | >$ pnpm install 12 | >$ pnpm dev 13 | ``` 14 | 15 | Open browser and visit [http://localhost:5173](http://localhost:5173) 16 | 17 | ### codeSandbox 18 | 19 | Visit [OverridingProviders](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/overriding-providers) 20 | -------------------------------------------------------------------------------- /examples/theme-context-provider/README.md: -------------------------------------------------------------------------------- 1 | # ThemeContextProvider 2 | 3 | A simple theme context provider example using vc-state 4 | 5 | ## quick start 6 | 7 | ### locally 8 | 9 | ```bash 10 | >$ git clone https://github.com/fanhaoyuan/vc-state.git && cd examples/theme-context-provider 11 | >$ pnpm install 12 | >$ pnpm dev 13 | ``` 14 | 15 | Open browser and visit [http://localhost:5173](http://localhost:5173) 16 | 17 | ### codeSandbox 18 | 19 | Visit [ThemeContextProvider](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/theme-context-provider) 20 | -------------------------------------------------------------------------------- /examples/nested-providers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["ESNext", "DOM"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"] 17 | } 18 | -------------------------------------------------------------------------------- /examples/overriding-providers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["ESNext", "DOM"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"] 17 | } 18 | -------------------------------------------------------------------------------- /examples/theme-context-provider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["ESNext", "DOM"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"] 17 | } 18 | -------------------------------------------------------------------------------- /examples/nested-providers/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from 'vue'; 2 | import { ThemeContextProvider, useThemeContext } from './theme.context'; 3 | import { Panel } from './Panel'; 4 | 5 | const Button = defineComponent({ 6 | name: 'Button', 7 | setup() { 8 | const { toggleTheme, theme } = useThemeContext(); 9 | return () => { 10 | return ; 11 | }; 12 | }, 13 | }); 14 | 15 | export default defineComponent({ 16 | name: 'App', 17 | setup() { 18 | return () => ( 19 | 20 | 21 | ; 25 | }; 26 | }, 27 | }); 28 | 29 | const Panel = defineComponent({ 30 | name: 'Panel', 31 | setup() { 32 | const { theme } = useThemeContext(); 33 | const currentThemeColor = computed(() => (theme.value === 'dark' ? '#000' : '#fff')); 34 | const oppositeThemeColor = computed(() => (theme.value === 'dark' ? '#fff' : '#000')); 35 | 36 | return () => { 37 | return ( 38 |
51 |

I'm in {theme.value} mode

52 |
53 | ); 54 | }; 55 | }, 56 | }); 57 | 58 | export default defineComponent({ 59 | name: 'App', 60 | setup() { 61 | return () => ( 62 | // defaultTheme is required 63 | // lightColor and darkColor are optional 64 | 65 | 66 | ; 24 | }; 25 | }, 26 | }); 27 | 28 | const Panel = defineComponent({ 29 | name: 'Panel', 30 | setup() { 31 | const { theme } = useThemeContext(); 32 | const currentThemeColor = computed(() => (theme.value === 'dark' ? '#000' : '#fff')); 33 | const oppositeThemeColor = computed(() => (theme.value === 'dark' ? '#fff' : '#000')); 34 | 35 | return () => { 36 | return ( 37 |
50 |

I'm in {theme.value} mode

51 |
52 | ); 53 | }; 54 | }, 55 | }); 56 | 57 | export default defineComponent({ 58 | name: 'App', 59 | setup() { 60 | return () => ( 61 | // useContext receives the provided value of the nearest Provider 62 | 63 | 64 | 65 | ; 64 | }; 65 | }, 66 | }); 67 | 68 | const Panel = defineComponent({ 69 | name: 'Panel', 70 | setup() { 71 | const { theme } = useThemeContext(); 72 | const currentThemeColor = computed(() => (theme.value === 'dark' ? '#000' : '#fff')); 73 | const oppositeThemeColor = computed(() => (theme.value === 'dark' ? '#fff' : '#000')); 74 | 75 | return () => { 76 | return ( 77 |
90 |

I'm in {theme.value} mode

91 |
92 | ); 93 | }; 94 | }, 95 | }); 96 | 97 | export default defineComponent({ 98 | name: 'App', 99 | setup() { 100 | return () => ( 101 | // defaultTheme is required 102 | // lightColor and darkColor are optional 103 | 104 | 105 |