Minimum distance between sliders

[ngalaiko]

Hi!

Great library, thanks for making it.

I am using it in one of my projects as a date range selector. Meaning I am selecting distance [from, to] in unix timestamps.

What I would like to do is to restrict picking distance that is less than 1 day. Basically enforce to - from >= 86400

What's the best way to implement it? Should I maybe write a new module for it?

[soanvig]

Hi, thanks for appreciation :-)

So yeah, I would just write a module.

See: https://github.com/soanvig/mm-jsr/blob/master/CONTRIBUTING.md#creating-new-modules
and for reference: https://github.com/soanvig/mm-jsr/blob/master/packages/mm-jsr/src/modules/ModuleNeighbourLimit.ts

So in this reference module I check if changelog.changedValues (therefore values being modified in this state update) are not trying to overlap (so second value becomes smaller than first value or vice versa). In your case probably you want to compare modified values to see if they are not close enough, and if necessary modify them (just like I modify them with clampReal, just use changeReal or something).

Side note: remember to put your new module before any other modules, because state needs to be updated before anything actually renders :-)

Make sure you have the lastest version (2.2.1), because this update function is a new feature to allow state modification inside modules.

If you encounter any problems I'm happy to help, so just write a message. Actually to be honest I've never tried to add a new module from end-user perspective, so some problems may occur. And after all work is done I would like to see your final module's code to see how it went. Also you don't have to create PR with new module or something, but posting this code here may help other users in future, because this may be common issue.

[ngalaiko]

Hey!

Tried to do so, but it looks like your npm contains already built sources, so I am unable to extend Module class, the implementation is private.

same goes for mapChanged function, assert package and so on.

what I've tried:

import type { ConfigDto } from 'mm-jsr/build/types/models/Config';
import type { State, StateDto } from 'mm-jsr/build/types/models/State';
import { Module } from 'mm-jsr/build/types/modules/Module';
import type { Changelog } from 'mm-jsr/build/types/modules/Module';

export interface ModuleSliderDistanceSettings {
  /**
   * Minimum distance between sliders.
   */
  minimum: number;
}

/**
 * Module responsible for limiting values so they never exceed neighbour values.
 */
export class ModuleSliderDistance extends Module {
  private readonly _settings: ModuleSliderDistanceSettings;

  constructor(settings: Partial<ModuleSliderDistanceSettings> = { minimum: 0 }) {
    super();

    this._settings = Object.assign(
      {
        minimum: Number
      },
      settings
    );
  }

  public update(config: ConfigDto, state: State, changelog: Changelog): State {
    const { values } = state;

    console.log(values);

    return state.updateValues(values);
  }
}

error:

Cannot find module 'mm-jsr/build/types/modules/Module' imported from '/mysrc/src/components/JSRMinimulDistance.ts'
Error: Cannot find module 'mm-jsr/build/types/modules/Module' imported from '/mysrc/src/components/JSRMinimulDistance.ts'
  at viteResolve (/mysrc/node_modules/vite/dist/node/chunks/dep-9c153816.js:56216:25)
  at nodeImport (/mysrc/node_modules/vite/dist/node/chunks/dep-9c153816.js:56251:15)
  at ssrImport (/mysrc/node_modules/vite/dist/node/chunks/dep-9c153816.js:56148:20)
  at eval (/mysrc/components/JSRMinimulDistance.ts:3:37)
  at instantiateModule (/mysrc/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)

Is my assumption correct? I am fairly new to typescript land

[soanvig]

I'll take a look tomorrow CET. Probably I just don't export them

[soanvig]

I can confirm, files are not exported. Let me do a quickfix with all necessary exports. I'll let you know about library version

[soanvig]

@ngalaiko - I released v2.2.2 of mm-jsr. Please, import everything from mm-jsr directly, that is:

import { Module, helpers } from 'mm-jsr`;

mapChanged is exported in helpers.

Not everything is exported at this moment, just things I find somewhat necessary. For example assert function is still private, because it's internal thing suited to specific case. The same about helpers from events directory.

[ngalaiko]

I get a different error now:

Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
    at /Users/nikita.galaiko/Documents/Ledger/charts/src/components/JSRModuleSliderDistance.ts:16:49
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async instantiateModule (/Users/nikita.galaiko/Documents/Ledger/charts/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)

Plus also vite reports:

mm-jsr doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

source code:

import type { ConfigDto } from 'mm-jsr/build/types/models/Config';
import type { State } from 'mm-jsr/build/types/models/State';
import { Module, helpers } from 'mm-jsr';
import type { Changelog } from 'mm-jsr/build/types/modules/Module';

export interface ModuleSliderDistanceSettings {
  /**
   * Minimum distance between sliders.
   */
  minimum: number;
}

/**
 * Module responsible for limiting neighboring values.
 */
export class ModuleSliderDistance extends Module {
  private readonly _settings: ModuleSliderDistanceSettings;

  constructor(settings: Partial<ModuleSliderDistanceSettings> = { minimum: 0 }) {
    super();

    this._settings = Object.assign(
      {
        minimum: Number
      },
      settings
    );
  }

  public update(config: ConfigDto, state: State, changelog: Changelog): State {
    const { values } = state;

    console.log(this._settings, values);

    return state.updateValues(values);
  }
}

 import { ModuleSliderDistance } from './JSRModuleSliderDistance';
 ...
 jsr = new JSR({
      modules: [
        ...
        new ModuleSliderDistance({ minimum: 86400 })
      ],
      config: { ... }
    });
...

[soanvig]

First error is runtime? Probably it is related to Vite error. I have never used Vite. I can check this tomorrow CET. It's strange that this error occurs though. JSR is compiled to UMD and should work.

BTW just for sanity check: import everything from mm-jsr, not specific path in package.

[ngalaiko]

It's the same when I import from 'mm-jsr' directly.

here are my configs if that helps you:

package.json

{
  "private": true,
  "scripts": {
    "generate": "ts-node-esm ./scripts/generate.ts",
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview"
  },
  "devDependencies": {
    "@fast-csv/parse": "^4.3.6",
    "@sveltejs/adapter-cloudflare": "1.0.0-next.16",
    "@sveltejs/kit": "^1.0.0-next.302",
    "@tailwindcss/typography": "^0.5.2",
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "apexcharts": "^3.33.2",
    "autoprefixer": "^10.4.2",
    "cssnano": "^5.1.4",
    "currency.js": "^2.0.4",
    "date-fns": "^2.28.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "mm-jsr": "^2.2.2",
    "postcss": "^8.4.6",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "svelte": "^3.46.0",
    "svelte-check": "^2.2.6",
    "svelte-preprocess": "^4.9.4",
    "tailwindcss": "^3.0.23",
    "ts-node": "^10.7.0",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3",
    "vite": "^2.8.4"
  },
  "type": "module",
  "dependencies": {}
}

tsconfig.json

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "plugins": [{ "name": "vite-plugin-iso-import" }],
    "moduleResolution": "node",
    "module": "esnext",
    "lib": ["esnext", "DOM"],
    "target": "esnext",
    "importsNotUsedAsValues": "error",
    "isolatedModules": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "allowJs": true,
    "checkJs": true
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte", "scripts/*.ts"]
}

.svelte-kit/tsconfig.json

{
	"compilerOptions": {
		"moduleResolution": "node",
		"module": "es2020",
		"lib": [
			"es2020",
			"DOM"
		],
		"target": "es2020",
		"importsNotUsedAsValues": "error",
		"preserveValueImports": true,
		"isolatedModules": true,
		"resolveJsonModule": true,
		"sourceMap": true,
		"esModuleInterop": true,
		"skipLibCheck": true,
		"forceConsistentCasingInFileNames": true,
		"baseUrl": "..",
		"allowJs": true,
		"checkJs": true,
		"paths": {
			"$lib": [
				"src/lib"
			],
			"$lib/*": [
				"src/lib/*"
			]
		},
		"rootDirs": [
			"..",
			"./types"
		]
	},
	"include": [
		"../src/**/*.js",
		"../src/**/*.ts",
		"../src/**/*.svelte"
	],
	"exclude": [
		"../node_modules/**",
		"./**"
	]
}

[soanvig]

To be honest it's not Vite issue, or any other bundler. I couldn't replicate this:

https://stackblitz.com/edit/vitejs-vite-t1hblr?file=main.js&terminal=dev

I found similar issue: FortAwesome/Font-Awesome#18514
It is probably somewhat related to SSR

[ngalaiko]

You are right, it looks like it works in that sandbox. Thanks, I'll look into. my builder config.

[soanvig]

@ngalaiko FYI I unpublished 2.2.2 because it introduced breaking change related to exports.

I'll upload today/tomorrow version 3.0.0 with fixed exports and few more breaking changes I've planned. You will find information in README

[soanvig]

Released under 3.0.2