Codey

Appearance

Report a problem:

Problems can be reported via Microsoft Teams in your team channel within the "IT - Codey" team.

Please include the following information:

Report type:
Docs problem report a bug instead →
Path:
/vnext/contributing/adr/records/007__creation-of-codey-core-package-with-sub-modules.html
Message:

DESCRIBE THE PROBLEM BEFORE SUBMITTING TO CODEY

Creation of codey core package with sub modules ​

Status: Approved

Decision Date: 17/05/2023

Scope: codey-composables & codey-core

Context ​

While creating the composables and modules for the starter template we noticed that the scope and meaning of "vue composables" was used incorrectly.

A "vue composable", as stated in the Vue documentation, is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic. This implies that vue lifecycle hooks can be used which is the main reason why you can only use such composables inside the setup function of a component.

Looking at this definition and the clear boundaries where these functions can be used it felt wrong to add standalone functions or modules to a packages named codey-composables. As it can create confusion what needs to be used inside a setup function and what not.

Decision ​

We decided to rename the codey-composable package to codey-core and divided it in 3 main modules:

  • composables: Containing all vue composables that are upholding the definition of a vue composable.
  • functions: Stateless functions that help distribute logic across projects.
  • modules: JS Modules with or without state that can be used in any context and do not rely on vue lifecycle hooks.

Import from composables or functions ​

As both composables and functions produce stand-alone functions they both export a single entry point.

Because of this the import will be as followed:

ts
// composables
import { useHelloWorld } from "@xerius/codey-core/composables";

// functions
import { isBelgianIban } from "@xerius/codey-core/functions";

Import from modules ​

As modules can export multiple functions or variables we felt it important the exports remain in the correct context instead of having a single entry point like with composabels and functions.

Therefor imports will happen as followed:

ts
import { createI18nInstance } from "@xerius/codey-core/modules/use-translations";

Consequences ​

The package import path will have a deeper level keep a clear overview of what module is being imported from.

Regarding building, extra effort needed to be done in order to export the typescript types of the modules correctly. The "exports" field in the package.json can be extended with types paths, but this isn't supported by all bundlers. The alternative solution we added is adding package redirects inside the dist folder. This allows for having the types in separate location (dist/types) while still being able to have the dist code in a structured manner. More information on this topic can be found here: general typescript issue, example repo showcasing multiple methods

Alternatives ​

An alternative approach would have been creating 3 packages (codey-composables, codey-functions & codey-modules) but as they are mostly used together this would only have added 3 extra dependencies on projects and 3 extra libraries to manage separately. This would shout over the goal of reducing the central packages of codey.