feat: directory namespaces support #8

Subwaytime · 2020-10-29T13:15:33Z

Hello there,
so ive created a smaller Pull Request that basically implements some Features that i had in my own vite-autoloader.
Due to it not beeing in Typescript ive converted all Features that were missing now over to this Plugin!

Features:

Allow Folder Names ( boolean )

This is just a simple Idea, if you for example got the following Folder Structure:
```
src/components
	book.vue
	ui
		button.vue
	layout
		content.vue
	transition
		fade.vue
```
Components within these Subfolders would be generated like the following:

book.vue, uiButton.vue , layoutContent.vue, transitionFade.vue

This allows Users to have Componentnames based on their Foldestructure.
Namespacing ( array with strings )
An Additional Feature to the first one: the user can allow specific Foldernames to be ignored within their Folderstructure:
```
 src/components
	global
		avatar.vue
	partials
		listItem.vue
```
This would result in the components beeing named as: avatar.vue, listItem.vue
Include_dirs and exclude_dirs ( array with strings )
Pretty Simple, ive just changed dirs to include_dirs to make it more recognizable.
I wanted to allow the Options also to exclude_dirs. This would mean that a User could ignore certain Folders within the include_dirs from getting autoloaded.
```
src/components
	test.vue (loaded)
	ui
		button.vue (loaded)
	partials
		listItem.vue (ignored)
```
Unfortunately i didnt had the time to implement this in the current Repo, but i will try to add it later on!
Bugs:
Currently there is only one Bug existent which is, if a component is loaded its name will normalize from context.ts.
```
src/components
	ui
		button.vue
```
Ends up with: Uibutton.vue rather then uiButton.vue. I could change this behavior from normalize to kebabCase, but this would enforce a specific Loadingstyle. It would be great if a component could be loaded no matter how it is written: ui-button.vue, uiButton.vue, Uibutton.vue, UiButton.vue etc
But due to my Typescript beeing a littly rusty i couldnt find a quick Solution that didnt break everything! I also fixed one Issue that index-named components were not loaded properly if they got their parent directory name.

Last but not least: I dont like the current allowFolderNames Option, so if someone finds a better name for it, feel free to change it! and please verify if this works on MACOS and Linux, because i am currently limited to Windows 10 64Bit.

Greetings,

Subwaytime

Change "dirs" to "include_dirs" (easier to understand) Add Namespaces as array filled with strings Add allowFolderNames as boolean

Fix `dirs` to `include_dirs`

Add Split, Join and isEmpty Helpers Update getNameFromFilePath to support new Features: Namespacing and allowFolderNames Fix Windows Issue with "index-named" components

Adjust new Options (dirs -> include_dirs) Call new Options within getNameFromFilePath

Subwaytime · 2020-10-29T13:16:32Z

Oh and small Editnote:
My Typescript isnt really good, so there are potential some fixes need to be made, but it works like this atm. Also my VSCode couldve maaaaybe changed the Linting quite a bit.. ^^

antfu · 2020-10-30T06:09:26Z

Thanks and the feature is good to have! I will have a closer look next Monday, before that, can you revert the formatting changes first? I would like to use 2 spaces for indentation and no semi. Thanks.

Subwaytime · 2020-10-30T09:22:57Z

Sure will do!

antfu

Looks good but a few naming things.

I will pull down to test out when we made these changes.

Thanks!

antfu · 2020-11-02T03:41:51Z

README.md

-    ViteComponents()
-  ]
-}
+	plugins: [ViteComponents()],


Could you revet formatting change in this file? Thanks.

antfu · 2020-11-02T03:43:03Z

src/types.ts

@@ -6,22 +6,40 @@ export interface Options {
   * Relative paths to the directory to search for components.
   * @default 'src/components'
   */
-  dirs: string | string[]
+  include_dirs: string | string[]


Suggested change

include_dirs: string | string[]

dirs: string | string[]

It's better to not introduce a breaking change. And I think it's ok to call it dirs for now.

Have you thought about the one Feature that i didnt had time to figure out?
exclude_dirs, thats basically the only reason why i swapped this to include_dirs, other then that i agree!
Atm it would be breaking, but if the exclude feature isnt available for now, i would leave it at dirs!

Yeah, maybe we can just expose inlcudeGlobs & excludeGlobs later on to it so users can have better controls on this.

antfu · 2020-11-02T03:45:04Z

src/types.ts

+   * @default false
+   */
+
+  allowFolderNames: boolean


Not very share about the naming. But allow something does not sounds good to an optional feature. Maybe:

folderToPrefix

folderNamespace

What do you think?

Yeah right, both options i didnt like!
folderNamespace would be good

antfu · 2020-11-02T03:46:59Z

src/types.ts

+   * Only works if Foldernames are allowed
+   * @default "['global', 'partials']"
+   */ 
+  namespaces: string[]


namespaces might be too general for this feature. Maybe

globalNamespaces

globalPrefixes

globalNamespaces sounds better here!

antfu · 2020-11-02T03:47:59Z

src/utils.ts

+export function split(str: string, sep: string) {
+    return str == '' ? [] : str.split(sep)
+}
+
+export function join(arr: string[], sep: string) {
+	return arr == null ? '' : Array.prototype.join.call(arr, sep)
+}


Do we need them?

not necessarily, just added them for convience, made the code a little bit more readable

antfu · 2020-11-02T03:49:25Z

test/fixture/src/App.vue

-    { label: 'First Level' },
-    { label: 'First Level', children: [{ label: 'Second Level' }] },
+      { label: "First Level" },
+      { label: "First Level", children: [{ label: "Second Level" }] },


Please revert the formating, thanks!

antfu · 2020-11-02T03:50:46Z

src/utils.ts

@@ -28,17 +44,51 @@ export function matchGlobs(filepath: string, globs: string[]) {
  return false
 }

-export function getNameFromFilePath(filePath: string): string {
+export function getNameFromFilePath(filePath: string, includedFrom: string | string[], allowFolderNames: boolean, namespaces: string[]): string {


We can pass the entire options here

Suggested change

export function getNameFromFilePath(filePath: string, includedFrom: string | string[], allowFolderNames: boolean, namespaces: string[]): string {

export function getNameFromFilePath(filePath: string, options: Options): string {

Right! Completely oversaw that 👍

Fix Formatting Fix getNameFromFilePath with all Options rather each single Option as Parameter

antfu · 2020-11-04T06:23:43Z

A few changes:

folderNamespace -> directoryAsNamespace
the default value of globalNamespaces is now an empty array.
namespaces will now require camelCases for constructing. e.g. ui/button.vue will be used as <UiButton> or <ui-button> instead of <Uibutton>
some logic changes to handle more edge cases (nest names, etc), check the fixture for more details.

Thanks for your work!

Subwaytime added 6 commits October 28, 2020 16:06

Add Test Components for the new Features

a725c72

Update Types

da1f5a4

Change "dirs" to "include_dirs" (easier to understand) Add Namespaces as array filled with strings Add allowFolderNames as boolean

Add Default Options for Namespaces and allowFolderNames

89ccf52

Fix `dirs` to `include_dirs`

Add Index Component Test

5870f94

Update Utils Functions

42f88a1

Add Split, Join and isEmpty Helpers Update getNameFromFilePath to support new Features: Namespacing and allowFolderNames Fix Windows Issue with "index-named" components

Update Contest File

c126b12

Adjust new Options (dirs -> include_dirs) Call new Options within getNameFromFilePath

Subwaytime added 2 commits October 29, 2020 14:32

Update Readme

0383273

Change Option to its original default Value

4ad65d8

Fix Formatting

f6279ed

antfu requested changes Nov 2, 2020

View reviewed changes

Subwaytime and others added 9 commits November 3, 2020 22:52

Fix Formatting on App.vue

4ac01b2

Fix Utils

11341a1

Fix Formatting Fix getNameFromFilePath with all Options rather each single Option as Parameter

Fix Types with new Names

2300f5f

Revert back to dirs from include_dirs

60e313c

Update Readme with old Formatting and new Names/Options

9ad7421

changes

962b512

docs

7fc3153

docs

3f09215

docs

5608c0c

antfu changed the title ~~Add new Features for Component Autoloading and Naming~~ feat: directory namespaces support Nov 4, 2020

antfu merged commit 5e9b3ba into unplugin:master Nov 4, 2020

	export function getNameFromFilePath(filePath: string, includedFrom: string \| string[], allowFolderNames: boolean, namespaces: string[]): string {
	export function getNameFromFilePath(filePath: string, options: Options): string {

Uh oh!

feat: directory namespaces support #8

feat: directory namespaces support #8

Uh oh!

Conversation

Subwaytime commented Oct 29, 2020

Uh oh!

Subwaytime commented Oct 29, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

antfu commented Oct 30, 2020

Uh oh!

Subwaytime commented Oct 30, 2020

Uh oh!

antfu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

antfu commented Nov 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Subwaytime commented Oct 29, 2020 •

edited

Loading

antfu commented Nov 4, 2020 •

edited

Loading