elchininet · elchininet · Apr 16, 2022 · Apr 16, 2022
diff --git a/docs/scripts/index.js b/docs/scripts/index.js
diff --git a/playground/src/@types/index.ts b/playground/src/@types/index.ts
@@ -7,4 +7,6 @@ export interface ObjectProps<T> {
     [key: string]: T;
 }
 
-export type PluginOptions = Parameters<typeof postcssRTLCSS>[0];
+export type PluginOptions = Parameters<typeof postcssRTLCSS>[0];
+
+export type FetchOptions = Record<string, string | boolean>;
diff --git a/playground/src/components/AppProvider/AppProvider.tsx b/playground/src/components/AppProvider/AppProvider.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
 import { Mode, Source, Autorename } from 'postcss-rtlcss/options';
-import { PluginOptions } from '@types';
+import { PluginOptions, FetchOptions } from '@types';
 import { useApi } from '@hooks/useApi';
 import { breakpointSizes } from '@utilities/styles';
 
@@ -17,12 +17,13 @@ export interface AppProviderContext {
     ready: boolean;
     token: string;
     fetchCode: string;
+    fetchOptions: FetchOptions;
     code: string;
     optionsOpen: boolean;
     options: PluginOptions;
     windowSizes: WindowSizes;
     setCode: (code: string) => void;
-    share: (code: string) => void;
+    share: (code: string, options: string) => void;
     setOptionsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     changeOptionsMode: (mode: Mode) => void;
     changeOptionsSource: (source: Source) => void;
@@ -69,7 +70,7 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
     const [ options, setOptions ] = useState<PluginOptions>(defaultOptions);
     const [ sizes, setSizes ] = useState<WindowSizes>(windowSizes);
     const [ optionsOpen, setOptionsOpen ] = useState<boolean>(false);
-    const { canShare, ready, token, fetchCode, share } = useApi();
+    const { canShare, ready, token, fetchCode, fetchOptions, share } = useApi();
 
     useEffect(() => {
         window.removeEventListener('resize', resize);
@@ -103,6 +104,7 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
         ready,
         token,
         fetchCode,
+        fetchOptions,
         code,
         options,
         optionsOpen,

diff --git a/playground/src/components/Header/Header.tsx b/playground/src/components/Header/Header.tsx
@@ -5,10 +5,11 @@ import { cssLines } from '@components/Playground/css';
 import { stylesheet } from './stylesheet';
 
 export const Header = (): JSX.Element => {
-    const { canShare, token, share, code } = useAppContext();
+    const { canShare, token, share, code, options } = useAppContext();
     const shareCallback = useCallback(() => {
-        share(code);
-    }, [share, code]);
+        const fetchOptions = JSON.stringify(options);
+        share(code, fetchOptions);
+    }, [share, code, options]);
     const showShareButton = canShare && token && code && code !== cssLines;
     return (
         <header css={stylesheet.wrapper}>

diff --git a/playground/src/components/Options/Options.tsx b/playground/src/components/Options/Options.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Mode, Source, Autorename } from 'postcss-rtlcss/options';
 import { useAppContext } from '@components/AppProvider';
 import { Switch } from '@components/Switch';
 import { SwitchGroup } from '@components/SwitchGroup';
 import { stylesheet } from './stylesheet';
+import { isBoolean } from '@utilities/types';
 
 export const Options = (): JSX.Element => {
 
     const {
         optionsOpen,
-        options,
         changeOptionsMode,
         changeOptionsSource,
         changeOptionsSafeBothPrefix,
@@ -19,7 +19,8 @@ export const Options = (): JSX.Element => {
         changeOptionsProcessEnv,
         changeOptionsUseCalc,
         changeOptionsAutoRename,
-        changeOptionsGreedy
+        changeOptionsGreedy,
+        fetchOptions
     } = useAppContext();
 
     const changeMode = (value: string): void => {
@@ -48,6 +49,41 @@ export const Options = (): JSX.Element => {
         }
     };
     const changeGreedy = (checked: boolean): void => changeOptionsGreedy(checked);
+
+    useEffect(() => {
+        if (fetchOptions) {
+            if (fetchOptions.mode) {
+                changeMode(fetchOptions.mode as string);
+            }
+            if (fetchOptions.source) {
+                changeSource(fetchOptions.source === 'rtl');
+            }
+            if (isBoolean(fetchOptions.safeBothPrefix)) {
+                changeIgnorePrefixedRules(fetchOptions.safeBothPrefix as boolean);
+            }
+            if (isBoolean(fetchOptions.ignorePrefixedRules)) {
+                changeIgnorePrefixedRules(fetchOptions.ignorePrefixedRules as boolean);
+            }
+            if (isBoolean(fetchOptions.processUrls)) {
+                changeProcessUrls(fetchOptions.processUrls as boolean);
+            }
+            if (isBoolean(fetchOptions.processKeyFrames)) {
+                changeProcessKeyframes(fetchOptions.processKeyFrames as boolean);
+            }
+            if (isBoolean(fetchOptions.processEnv)) {
+                changeProcessEnv(fetchOptions.processEnv as boolean);
+            }
+            if (isBoolean(fetchOptions.useCalc)) {
+                changeUseCalc(fetchOptions.useCalc as boolean);
+            }
+            if (fetchOptions.autoRename) {
+                changeAutoRename(fetchOptions.autoRename as string);
+            }
+            if (isBoolean(fetchOptions.greedy)) {
+                changeGreedy(fetchOptions.greedy as boolean);
+            }
+        }
+    }, [fetchOptions]);
 
     return (
         <div css={stylesheet.wrapper} data-opened={optionsOpen}>
@@ -62,57 +98,85 @@ export const Options = (): JSX.Element => {
                         name="mode"
                         values={['combined', 'override', 'diff']}
                         onChange={changeMode}
+                        active={ fetchOptions?.mode as string ||  'combined'}
                     />
                 </div>
                 { /* Source */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['source: ltr', 'source: rtl']}
                         onChange={changeSource}
+                        attributes={{
+                            checked: fetchOptions?.source === 'rtl'
+                        }}
                     />
                 </div>
                 { /* safeBothPrefix */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['safeBothPrefix: false', 'safeBothPrefix: true']}
                         onChange={changeSafeBothPrefix}
+                        attributes={{
+                            checked: !!fetchOptions?.safeBothPrefix
+                        }}
                     />
                 </div>
                 { /* ignorePrefixedRules */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['ignorePrefixedRules: false', 'ignorePrefixedRules: true']}
-                        attributes={{ checked: true }}
                         onChange={changeIgnorePrefixedRules}
+                        attributes={{
+                            checked: !!(
+                                isBoolean(fetchOptions?.ignorePrefixedRules)
+                                    ? fetchOptions.ignorePrefixedRules
+                                    : true
+                            )
+                        }}                        
                     />
                 </div>
                 { /* processUrls */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['processUrls: false', 'processUrls: true']}
                         onChange={changeProcessUrls}
+                        attributes={{
+                            checked: !!fetchOptions?.processUrls
+                        }}
                     />
                 </div>
                 { /* processKeyFrames */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['processKeyFrames: false', 'processKeyFrames: true']}                        
                         onChange={changeProcessKeyframes}
+                        attributes={{
+                            checked: !!fetchOptions?.processKeyFrames
+                        }}
                     />
                 </div>
                 { /* processEnv */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['processEnv: false', 'processEnv: true']}
-                        attributes={{ checked: true }}
                         onChange={changeProcessEnv}
+                        attributes={{
+                            checked: !!(
+                                isBoolean(fetchOptions?.processEnv)
+                                    ? fetchOptions.processEnv
+                                    : true
+                            )
+                        }}
                     />
                 </div>
                 { /* useCalc */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['useCalc: false', 'useCalc: true']}
                         onChange={changeUseCalc}
+                        attributes={{
+                            checked: !!fetchOptions?.useCalc
+                        }}
                     />
                 </div>
                 { /* autoRename */ }
@@ -122,13 +186,17 @@ export const Options = (): JSX.Element => {
                         name="auto-rename"
                         values={['disabled', 'flexible', 'strict']}
                         onChange={changeAutoRename}
+                        active={fetchOptions?.autoRename as string || 'disabled'}
                     />
                 </div>
                 { /* greedy */ }
                 <div css={stylesheet.panel}>
                     <Switch
                         labels={['greedy: false', 'greedy: true']}
                         onChange={changeGreedy}
+                        attributes={{
+                            checked: !!fetchOptions?.greedy
+                        }}
                     />
                 </div>
             </div>

diff --git a/playground/src/components/SwitchGroup/SwitchGroup.tsx b/playground/src/components/SwitchGroup/SwitchGroup.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from 'react';
+import React, { useState, useEffect, ChangeEvent } from 'react';
 import { stylesheet } from './stylesheet';
 
 interface Attributes {
@@ -25,7 +25,14 @@ export const SwitchGroup = (props: SwitchGroupProps): JSX.Element => {
         active,
         onChange
     } = props;
-    const [selected, setSelected] = useState(active || values[0]);
+    const [selected, setSelected] = useState(values[0]);
+
+    useEffect(() => {
+        if (active) {
+            setSelected(active);
+        }
+    }, [active]);
+
     const onChangeRadio = (event: ChangeEvent<HTMLInputElement>) => {
         const currentTarget = event.currentTarget;
         const value = currentTarget.value;

diff --git a/playground/src/constants/index.ts b/playground/src/constants/index.ts
@@ -6,4 +6,6 @@ export enum COLORS {
     gray_darkest = '#1E1E1E',
     gray_light = '#EFEFEF',
     white = '#FFF'
-}
+}
+
+export const BOOLEAN_TYPE = 'boolean';