chore: build and export types [TCTC-3320] (#1455)

* chore: add build-types script

* chore: use relative paths when possible in main.ts

* chore: export types used in tucana

* chore: minor version bump

* chore: lint rollup config

* chore: export types from types.ts

* chore: ignore cov on src/types.ts

CHANGELOG.md

@@ -1,12 +1,19 @@
 # Changelog (weaverbird npm package)
 
+## [0.89.0] - 2022-08-19
+
+- Export type definitions
+
 ## [0.88.0] - 2022-08-18
+
 - Translators: enable unpivot step for pypika translator
 
 ## [0.87.0] - 2022-08-05
+
 - Translators: enable todate steps for pypika translator
 
 ## [0.86.0] - 2022-07-28
+
 - Domain step: retrieve name as label for external query domain
 - Steps: add dissolve step
 - Translators: enable join and append steps for pypika translator
@@ -23,24 +30,29 @@
 ## [0.83.1] - 2022-05-27
 
 ### Fixed
+
 - Fix ifthenelse step with date conditions
 
 ## [0.83.0] - 2022-05-24
 
 ### Changed
+
 - Use 'desc' order by default for top step
 
 ### Feat
+
 - Add top step in other options
 
 ## [0.82.3] - 2022-03-23
 
 ### Fixed
+
 - Mongo translator: handle years and timestamps correctly
 
 ## [0.82.2] - 2022-02-03
 
 ### Changed
+
 - Dataviewer: add data cy element for e2e tests
 
 ## [0.82.1] - 2022-02-02
@@ -62,9 +74,11 @@
 ## [0.81.0] - 2022-01-24
 
 ### Added
+
 - Query: domains can be replaced by references to other queries
 
 ### Fixed
+
 - Step: Hide previous step error when creating a new step
 
 ## [0.80.0] - 2022-01-19
@@ -105,11 +119,13 @@
 ## [0.79.1] - 2021-12-16
 
 ### Added
+
 - DateRangeToString: export method to use it outside of app
 
 ## [0.79.0] - 2021-12-16
 
 ### Added
+
 Preview source subset: improve design and move component under domain step
 
 ## [0.78.1] - 2021-12-10
@@ -137,11 +153,13 @@ Preview source subset: improve design and move component under domain step
 ## [0.76.2] - 2021-11-22
 
 ### Fixed
+
 - Variable input: don't clear field when selecting variables in multiple mode
 
 ## [0.76.1] - 2021-11-17
 
 ### Fixed
+
 - Calendars: reset value and update nav position when selected value is outside of updated bounds
 
 ## [0.76.0] - 2021-11-16
@@ -157,6 +175,7 @@ Preview source subset: improve design and move component under domain step
 ## [0.75.0] - 2021-11-09
 
 ### Changed
+
 - UI: DateRangeInput: remove background of the reset button
 - UI: Relative date selection: rename before/after to from/until
 
@@ -182,44 +201,53 @@ Preview source subset: improve design and move component under domain step
 ## [0.72.1] - 2021-10-29
 
 ### Fixed
+
 TabbedRangeCalendars: keep selected tab unchanged when updated enabled calendars contains selected tab
 
 ## [0.72.0] - 2021-10-28
 
 ### Added
+
 - DateRangeInput: ability to customize the format of the date range
 
 ## [0.71.0] - 2021-10-27
 
 ### Added
+
 - DateRangeInput: enable to use custom css variables to stylize component colors
 
 ## [0.70.0] - 2021-10-27
 
 ### Added
+
 - DateRangeInput: internationalization for fixed periods (English and French)
 
 ### Fixed
+
 - DateRangeInput: better preview with new system to keep popovers always opened
 
 ## [0.69.2] - 2021-10-26
 
 ## Fix
+
 - Multiselect: restore display of text in variables tags
 
 ## [0.69.1] - 2021-10-21
 
 ### Fix
+
 - DateRangeInput: display tabs header correctly
 - DateRangeInput: display date separator correctly and clean unecessary html tag
 - Calendar: use correct post css
 
 ## [0.69.0] - 2021-10-20
 
 ### Added
+
 - Dates input components: friendlier labels for calendar ranges
 
 ### Fix
+
 - WidgetList: display trash icon
 - Store: avoid console error messages due to state mutation
 - DateRangeInput: make all input clickable
@@ -231,14 +259,17 @@ TabbedRangeCalendars: keep selected tab unchanged when updated enabled calendars
 ## [0.68.0] - 2021-10-19
 
 ### Added
+
 - DateRangeInput: implement bounds in custom granularity calendars (years, quarters, months, weeks)
 
 ### Fix
+
 - DateRangeInput: force popover to update position when clicking on `custom` option
 
 ## [0.67.1] - 2021-10-19
 
 ### Fix
+
 - DateRangeInput: remove `daterangeUpdated` emitter and export method directly from main file
 - Date components: rename `Dynamic` tab to `Relative`
 - CustomVariableList: show only the label of options
@@ -269,9 +300,11 @@ TabbedRangeCalendars: keep selected tab unchanged when updated enabled calendars
 ## [0.65.0] - 2021-10-13
 
 ### Added
+
 - DateRangeInput: hide 'unactive' variables needed for computations from UI
 
 ### Fix
+
 - Calendar: use UTC timezone
 
 ## [0.64.1] - 2021-10-12
@@ -285,6 +318,7 @@ TabbedRangeCalendars: keep selected tab unchanged when updated enabled calendars
 ## [0.64.0] - 2021-10-12
 
 ### Changed
+
 - DateRangeInput: enable to use relative date as bounds
 
 ## [0.63.0] - 2021-10-12
@@ -297,6 +331,7 @@ TabbedRangeCalendars: keep selected tab unchanged when updated enabled calendars
 - DateRangeInput: hide/show custom editor depding on `enableCustom` variable
 
 ### Changed
+
 - DateRangeInput: replace range-calendar with a simple calendar using a range
 - DateRangeInput: Disable save custom date button if value is incomplete
 
@@ -312,7 +347,6 @@ TabbedRangeCalendars: keep selected tab unchanged when updated enabled calendars
 
 - Export for dates components
 
-
 ## [0.60.9] - 2021-09-30
 
 ### Fixed

build-types.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+rm -rf dist/types
+npx tsc -p tsconfig.types.json
+for file in dist/types/**/*.*
+do
+  if [ $file = dist/types/main.d.ts ]
+  then
+    path_to_src=./
+  else
+    path_to_src=$(echo $file | tr -dc '/' | colrm 1 2 | sed "s#/#../#g")
+  fi
+  sed -i -r "s#((import|export) .* from ')@/(.*)#\1$path_to_src\3#g" $file
+done

jest.config.js

@@ -15,6 +15,13 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/(?!v-calendar)', 'tests/*.js', 'playground/*'],
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{vue,ts,js}'],
-  coveragePathIgnorePatterns: ['/node_modules/', 'playground/', 'tests/', 'src/typings/', 'src/main.ts'],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    'playground/',
+    'tests/',
+    'src/typings/',
+    'src/main.ts',
+    'src/types.ts',
+  ],
   coverageDirectory: 'coverage',
 };

package.json

@@ -1,6 +1,7 @@
 {
   "name": "weaverbird",
-  "version": "0.88.0",
+  "version": "0.89.0",
+  "types": "./dist/types/types.d.ts",
   "description": "A generic Visual Query Builder built in Vue.js",
   "bugs": {
     "url": "https://github.com/ToucanToco/weaverbird/issues",
@@ -19,8 +20,9 @@
     "lint": "eslint --no-error-on-unmatched-pattern \"src/{components,lib,store}/**/*.{ts,vue}\" \"tests/**/*.ts\"",
     "lint:fix": "eslint --fix --no-error-on-unmatched-pattern \"src/{components,lib,store}/**/*.{ts,vue}\" \"tests/**/*.ts\"",
     "lint:ci": "yarn lint --output-file lint-report.json --format json",
-    "build": "yarn build-bundle",
+    "build": "yarn run build-bundle && yarn run build-types",
     "build-bundle": "rollup -c",
+    "build-types": ". ./build-types.sh",
     "build-doc": "typedoc --tsconfig tsconfig.json --readme README.md --out dist/docs src/",
     "storybook": "concurrently \"yarn storybook:bundle --watch\" \"start-storybook -p 9001 -c .storybook\"",
     "storybook:build": "build-storybook -o .storybook/dist -c .storybook",

rollup.config.js

@@ -1,17 +1,16 @@
+import autoprefixer from 'autoprefixer';
 import fs from 'fs';
 import path from 'path';
-
+import postcssPresetEnv from 'postcss-preset-env';
 import alias from 'rollup-plugin-alias';
-import autoprefixer from "autoprefixer";
 import commonjs from 'rollup-plugin-commonjs';
 import json from 'rollup-plugin-json';
-import postcss from 'rollup-plugin-postcss'
-import postcssPresetEnv from 'postcss-preset-env';
-import replace from 'rollup-plugin-replace';
 import resolve from 'rollup-plugin-node-resolve';
+import postcss from 'rollup-plugin-postcss';
+import replace from 'rollup-plugin-replace';
+import { terser } from 'rollup-plugin-terser';
 import typescript from 'rollup-plugin-typescript';
 import vue from 'rollup-plugin-vue';
-import { terser } from 'rollup-plugin-terser';
 
 const production = process.env.NODE_ENV === 'production' || !process.env.ROLLUP_WATCH;
 /**
@@ -44,14 +43,19 @@ export default {
       // Default extensions ['.mjs', '.js', '.json', '.node']
       // We need to add the '.vue' extension because of the import of the component from v-calendar
       // which contains relative paths without extensions.
-      extensions: ['.mjs', '.js', '.ts', '.json', '.node', '.vue']
+      extensions: ['.mjs', '.js', '.ts', '.json', '.node', '.vue'],
     }),
     alias({
       resolve: ['.vue', '.json'],
       '@': path.join(packageDir(), '/src'),
     }),
     // date-fns comes from v-calendar
-    commonjs({ namedExports: { 'node_modules/mathjs/index.js': ['parse'], 'node_modules/date-fns/index.js': ['addDays'] } }),
+    commonjs({
+      namedExports: {
+        'node_modules/mathjs/index.js': ['parse'],
+        'node_modules/date-fns/index.js': ['addDays'],
+      },
+    }),
     // since we are using a v-calendar component directly we need to use postcss and apply the same config
     postcss({
       plugins: [
@@ -61,11 +65,10 @@ export default {
             'nesting-rules': true,
           },
         }),
-        autoprefixer()
+        autoprefixer(),
       ],
       // extract option break CSS live reload in Storybook, comment it to get it back
-      extract: true,
-      extract: 'weaverbird.css'
+      extract: 'weaverbird.css',
     }),
     replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
     vue({ css: false }),

sonar-project.properties

@@ -3,11 +3,11 @@ sonar.organization=toucantoco
 
 # This is the name and version displayed in the SonarCloud UI.
 # sonar.projectName=weaverbird
-sonar.projectVersion=0.88.0
+sonar.projectVersion=0.89.0
 
 # Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
 sonar.sources=./src
-sonar.coverage.exclusions=./src/typings,./src/main.ts
+sonar.coverage.exclusions=./src/typings,./src/main.ts,./src/types.ts
 
 # Encoding of the source code. Default is default system encoding
 #sonar.sourceEncoding=UTF-8

src/main.ts

@@ -7,27 +7,27 @@ export { setAvailableCodeEditors } from './components/code-editor';
 export { defineSendAnalytics } from './lib/send-analytics';
 
 // export store entrypoints
-export { dereferencePipelines, getPipelineNamesReferencing } from '@/lib/dereference-pipeline';
+export { dereferencePipelines, getPipelineNamesReferencing } from './lib/dereference-pipeline';
 export {
   setupStore,
   registerModule,
   unregisterModule,
   VQBModule,
   VQBnamespace,
   VQB_MODULE_NAME,
-} from '@/store';
+} from './store';
 
-import '@/lib/icons';
+import './lib/icons';
 
 // export Vue components
-import DataViewer from '@/components/DataViewer.vue';
-import FilterEditor from '@/components/FilterEditor.vue';
-import Pagination from '@/components/Pagination.vue';
-import PipelineSelector from '@/components/PipelineSelector.vue';
-import QueryBuilder from '@/components/QueryBuilder.vue';
-import DateRangeInput from '@/components/stepforms/widgets/DateComponents/DateRangeInput.vue';
-import NewDateInput from '@/components/stepforms/widgets/DateComponents/NewDateInput.vue';
-import Vqb from '@/components/Vqb.vue';
+import DataViewer from './components/DataViewer.vue';
+import FilterEditor from './components/FilterEditor.vue';
+import Pagination from './components/Pagination.vue';
+import PipelineSelector from './components/PipelineSelector.vue';
+import QueryBuilder from './components/QueryBuilder.vue';
+import DateRangeInput from './components/stepforms/widgets/DateComponents/DateRangeInput.vue';
+import NewDateInput from './components/stepforms/widgets/DateComponents/NewDateInput.vue';
+import Vqb from './components/Vqb.vue';
 
 export {
   // All-in-one component
@@ -44,9 +44,9 @@ export {
 };
 
 // export helpers/utils
-export { exampleInterpolateFunc } from '@/lib/templating';
-export { transformValueToDateRange } from '@/components/DatePicker/transform-value-to-date-or-range';
-export { dateRangeToString } from '@/lib/dates';
+export { exampleInterpolateFunc } from './lib/templating';
+export { transformValueToDateRange } from './components/DatePicker/transform-value-to-date-or-range';
+export { dateRangeToString } from './lib/dates';
 
 // export directives
-export { resizable } from '@/directives/resizable/resizable';
+export { resizable } from './directives/resizable/resizable';

src/types.ts

@@ -0,0 +1,8 @@
+export * from './main';
+
+export { PipelineStep, Pipeline } from './lib/steps';
+export { VariableDelimiters, VariablesBucket } from './lib/variables';
+export { ColumnValueStat } from './lib/dataset/helpers';
+export { PaginationContext } from './lib/dataset/pagination';
+export { DataSetColumnType, DataSetColumn, DataSet } from './lib/dataset';
+export { BackendError, BackendWarning, BackendResponse, BackendService } from './lib/backend';

tsconfig.json

@@ -20,6 +20,6 @@
     "lib": ["es5", "esnext", "dom", "dom.iterable", "scripthost"],
     "resolveJsonModule": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "rollup.config.js"],
   "exclude": ["node_modules"]
 }