[r5n-5] Snippet configurability and filename-derived naming fixes

README.md

@@ -101,6 +101,40 @@ Accepts a comma-separated list of VS Code language identifiers.
 
 Controls whether Props and State declarations use type aliases or interfaces in TypeScript snippets.
 
+### `typescriptPropsNaming`
+
+**Type:** `string`
+
+**Default:** `generic`
+
+**Allowed values:** `generic`, `component`
+
+Controls whether TypeScript component snippets name their props type `Props` or derive it from the component name, for example `ButtonProps`.
+
+### `componentNameSource`
+
+**Type:** `string`
+
+**Default:** `filename`
+
+**Allowed values:** `filename`, `directoryForIndex`
+
+Controls how component snippets derive their name. `directoryForIndex` uses the parent directory for an `index.*` file, so `Button/index.tsx` becomes `Button`; other filenames still use their basename.
+
+Either way the name is converted to PascalCase, so `delete-modal.tsx` becomes `DeleteModal`. Separators such as `-`, `_`, and `.` are dropped, and names that are already PascalCase are left unchanged.
+
+Redux slice snippets are not components, so they are only renamed when the filename would not be a valid identifier: `user-slice.ts` becomes `userSlice`, while `UserSlice.ts` is left alone.
+
+### `componentWrapper`
+
+**Type:** `string`
+
+**Default:** `fragment`
+
+**Allowed values:** `fragment`, `div`
+
+Controls whether generated web component content is wrapped in a React fragment or a `div`.
+
 ## Editor support
 
 ### VS Code · Cursor · VSCodium

docs/Snippets.md

@@ -7,6 +7,8 @@ Snippet bodies preserve the spacing shown below; spaces inside braces and parent
 
 _TypeScript_ has own components and own snippets. Use search or just type `ts` before every component snippet.
 
+Component snippets use the current filename by default. Set `componentNameSource` to `directoryForIndex` to use the parent directory for `index.*` files.
+
 I.E. `tsrcc`
 
 <br>
@@ -384,7 +386,7 @@ export default FileName;
 ```javascript
 import { memo } from 'react';
 
-const FileName = memo(() => {
+const FileName = memo(function FileName() {
   return <>$2</>;
 });
 
@@ -397,7 +399,7 @@ export default FileName;
 import { memo } from 'react';
 import PropTypes from 'prop-types';
 
-const FileName = memo((props) => {
+const FileName = memo(function FileName(props) {
   return <>$2</>;
 });
 
@@ -479,7 +481,7 @@ const mapDispatchToProps = {};
 
 ## TypeScript Components
 
-All TypeScript component snippets use `type` for Props/State by default. Change to `interface` via the `typescriptPropsStatePrefix` setting.
+All TypeScript component snippets use `type` for Props/State by default. Change to `interface` via the `typescriptPropsStatePrefix` setting. Set `typescriptPropsNaming` to `component` to derive the Props type from the component name, for example `ButtonProps`.
 
 |       Prefix | Method                                                  |
 | -----------: | ------------------------------------------------------- |

package.json

@@ -68,7 +68,7 @@
     "typescript": "6.0.3"
   },
   "overrides": {
-    "brace-expansion": "5.0.7",
+    "brace-expansion": "5.0.8",
     "fast-uri": "3.1.4",
     "form-data": "4.0.6",
     "js-yaml": "4.3.0",
@@ -121,6 +121,36 @@
             "interface"
           ],
           "scope": "application"
+        },
+        "reactSnippets.settings.typescriptPropsNaming": {
+          "type": "string",
+          "markdownDescription": "Controls whether TypeScript component snippets name their props type `Props` or derive it from the component name, for example `ButtonProps`.",
+          "default": "generic",
+          "enum": [
+            "generic",
+            "component"
+          ],
+          "scope": "application"
+        },
+        "reactSnippets.settings.componentNameSource": {
+          "type": "string",
+          "markdownDescription": "Controls whether component snippets use the filename or use the parent directory name for `index.*` files.",
+          "default": "filename",
+          "enum": [
+            "filename",
+            "directoryForIndex"
+          ],
+          "scope": "application"
+        },
+        "reactSnippets.settings.componentWrapper": {
+          "type": "string",
+          "markdownDescription": "Controls whether component snippets wrap their content in a React fragment or a `div`.",
+          "default": "fragment",
+          "enum": [
+            "fragment",
+            "div"
+          ],
+          "scope": "application"
         }
       }
     },

src/helpers/buildSnippets.ts

@@ -167,7 +167,7 @@ const compileSnippet = (
 ): GeneratedSnippet => ({
   prefix: snippet.prefix,
   body: parseSnippetToBody(snippet, settings.importReactOnTop).map((line) =>
-    replaceSnippetPlaceholders(line, settings.typescriptPropsStatePrefix),
+    replaceSnippetPlaceholders(line, settings),
   ),
   ...(snippet.description === undefined
     ? {}

src/helpers/extensionConfig.ts

@@ -1,6 +1,12 @@
 import { workspace } from 'vscode';
 
-import { DEFAULT_GENERATION_SETTINGS, GenerationSettings } from '../types';
+import {
+  ComponentNameSource,
+  ComponentWrapper,
+  DEFAULT_GENERATION_SETTINGS,
+  GenerationSettings,
+  TypescriptPropsNaming,
+} from '../types';
 
 export type ExtensionSettings = GenerationSettings;
 
@@ -24,6 +30,18 @@ const extensionConfig = (): ExtensionSettings => {
       'typescriptPropsStatePrefix',
       DEFAULT_GENERATION_SETTINGS.typescriptPropsStatePrefix,
     ),
+    typescriptPropsNaming: config.get<TypescriptPropsNaming>(
+      'typescriptPropsNaming',
+      DEFAULT_GENERATION_SETTINGS.typescriptPropsNaming,
+    ),
+    componentNameSource: config.get<ComponentNameSource>(
+      'componentNameSource',
+      DEFAULT_GENERATION_SETTINGS.componentNameSource,
+    ),
+    componentWrapper: config.get<ComponentWrapper>(
+      'componentWrapper',
+      DEFAULT_GENERATION_SETTINGS.componentWrapper,
+    ),
   };
 };
 

src/helpers/snippetPlaceholders.ts

@@ -1,25 +1,59 @@
 import { GenerationSettings, Mappings, Placeholders } from '../types';
 
+const propsPlaceholders = {
+  generic: {
+    type: Mappings.TypeProps,
+    interface: Mappings.InterfaceProps,
+  },
+  component: {
+    type: Mappings.ComponentTypeProps,
+    interface: Mappings.ComponentInterfaceProps,
+  },
+} as const;
+
+const componentNamePlaceholders = {
+  filename: Mappings.ComponentFileName,
+  directoryForIndex: Mappings.ComponentDirectoryNameForIndex,
+} as const;
+
 export const replaceSnippetPlaceholders = (
   snippetString: string,
-  typescriptPropsStatePrefix: GenerationSettings['typescriptPropsStatePrefix'],
+  settings: GenerationSettings,
 ): string => {
+  const {
+    componentNameSource,
+    componentWrapper,
+    typescriptPropsNaming,
+    typescriptPropsStatePrefix,
+  } = settings;
   const propsPlaceholder =
-    typescriptPropsStatePrefix === 'type'
-      ? Mappings.TypeProps
-      : Mappings.InterfaceProps;
+    propsPlaceholders[typescriptPropsNaming][typescriptPropsStatePrefix];
+  const componentNamePlaceholder =
+    componentNamePlaceholders[componentNameSource];
+  const propsName =
+    typescriptPropsNaming === 'component'
+      ? Mappings.ComponentProps
+      : Mappings.Props;
   const statePlaceholder =
     typescriptPropsStatePrefix === 'type'
       ? Mappings.TypeState
       : Mappings.InterfaceState;
+  const componentWrapperPlaceholder =
+    componentWrapper === 'fragment'
+      ? Mappings.FragmentComponentWrapper
+      : Mappings.DivComponentWrapper;
 
   return String(snippetString)
+    .replaceAll(Placeholders.TypeProps, propsPlaceholder)
+    .replaceAll(Placeholders.TypeState, statePlaceholder)
+    .replaceAll(Placeholders.ComponentProps, propsName)
+    .replaceAll(Placeholders.ComponentName, componentNamePlaceholder)
+    .replaceAll(Placeholders.SliceName, Mappings.SliceFileName)
     .replaceAll(Placeholders.FileName, Mappings.FileName)
+    .replaceAll(Placeholders.ComponentWrapper, componentWrapperPlaceholder)
     .replaceAll(Placeholders.FirstTab, Mappings.FirstTab)
     .replaceAll(Placeholders.SecondTab, Mappings.SecondTab)
     .replaceAll(Placeholders.ThirdTab, Mappings.ThirdTab)
     .replaceAll(Placeholders.Capitalize, Mappings.Capitalize)
-    .replaceAll(Placeholders.TypeProps, propsPlaceholder)
-    .replaceAll(Placeholders.TypeState, statePlaceholder)
     .replaceAll(Placeholders.FourthTabCapitalize, Mappings.FourthTabCapitalize);
 };