{"id":21615847,"url":"https://github.com/valango/val-front","last_synced_at":"2026-05-18T00:08:34.077Z","repository":{"id":40709890,"uuid":"282972109","full_name":"valango/val-front","owner":"valango","description":"simple front-end code helpers (not to be published yet)","archived":false,"fork":false,"pushed_at":"2023-01-06T14:51:06.000Z","size":758,"stargazers_count":0,"open_issues_count":17,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-25T22:48:35.226Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/valango.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-27T17:44:26.000Z","updated_at":"2020-12-03T13:08:28.000Z","dependencies_parsed_at":"2023-02-06T05:30:46.396Z","dependency_job_id":null,"html_url":"https://github.com/valango/val-front","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/valango/val-front","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valango%2Fval-front","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valango%2Fval-front/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valango%2Fval-front/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valango%2Fval-front/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valango","download_url":"https://codeload.github.com/valango/val-front/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valango%2Fval-front/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33160168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"ssl_error","status_checked_at":"2026-05-17T22:39:10.741Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-24T22:12:59.626Z","updated_at":"2026-05-18T00:08:30.781Z","avatar_url":"https://github.com/valango.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# val-front\n\nSimple code snippets for making front-end coding more fun.\n\nNote: this project is just a collection of sketches. Published packages\n`vue-proper` and `assert-fine` both emerged from here.\n\nThe package in intended for using with ES5+ source code. It has the following parts:\n\n* [assert](#assertions) - enables debugger breakpoints for assertions;\n* [debug](#debugging) - convenience wrapper around popular \n  [debug](https://github.com/visionmedia/debug]) package;\n* [mixin](#vuejs-mixin) - Vue.js mix-in for cleaner and safer code;\n* [Own](#own-baseclass) - ES5 base class for more maintainable code;\n* [performance](#performance) - a simple API for code profiling;\n* [vueName](#vuename-function) - get Vue.js comnponent instance name.\n\nThese parts can be loaded individually, like `import dbg from 'val-front/debug'`\u003cbr /\u003e\nor together, like `import {assert, mixin} frpm 'val-front'`\n\n### Assertions\n```javascript\nimport { assert } from 'val-front'\n\n//  You can this to find out what causes seemingly random assertions.\nassert.callback((...args) =\u003e {\n  //  Great place for debugger breakpoint!\n})\n\nassert( someCondition, ... )  // Optional extra arguments for console.assert() \n```\nOn success, assert returns its first argument value.\nOtherwise, an exception with message 'AssertionError' is thrown after callback (if set).\nIn non-production mode, `console.assert()` is called before throwing exception, so there\nwill be some useful information on the console.\n\n### Debugging\nDebugging machinery is based on [debug](https://github.com/visionmedia/debug])\nNPM package and is available only in development mode. In production mode all it's API\nmethods will be just empty functions. Here are simple examples:\n\n**Debugging plain javascript code:**\n```javascript\n  const debug = require('val-front/debug')('main.js')\n\n  debug('try(%d, %o)', 1, 2, 3)  // main.js try(1, 2) +0ms 3\n```\n\n**Debugging class instances:**\n```javascript\n  import Own from 'val-front/Own'\n\n  class A extends Own {}\n\n  new A().debug('yay')  //  A#1 yay +0ms\n```\n\n**Debugging Vue.js components:**\nJust make sure your component has _**`mixin`**_ imported from 'val-front' -\nyour component instance will have `debug()` method.\n\n#### Fine control of debugging\nBy default, call to debug() method will generate console output.\nIt may generate quite a mess on console, as your code grows.\n\nTo be more selective, you may do the following:\n   1. assign a mask to debug.enabled in your app root module:\u003cbr /\u003e\n   ` require('val-front').debug.enabled = '*, -proven*'`;\n   1. use DEBUG environment variable (may be a bit less convenient);\n   1. explicitly set _`debugOn`_ instance variable to _true_ or _false_;\n   1. in plain javascript: `const debug = require('val-front').debug('main.js', trueOrFalse)`\n\nTricks #2, #3 will override the effects of #1, #2.\n\n### Own baseclass\n`constructor Own(className= : {string})`\n\nThis baseclass provides API for safer code and some diagnostic support as well:\n   * `method debug(...)  -` see [debugging](#debugging) for details.\n   * `method dispose()   -` call this to free up all bound resources.\n   Base class method cleans the _**`own`**_ container, firing _`dispose`_ method of every\n   object instance having it. Then it un-registers all handlers set by _`ownOn`_ method.\n   * `function ownOff (event= : string, emitter= : Object) : this` -\n   un-registers handlers registered for matching (event, emitter) pairs.\n   It is called by dispose(), so in most cases you don't need to call it explicitly.\n   * `function ownOn (event : string, handler, emitter, api=) : this` -\n   registers _`event`_ _`handler`_ with _`emitter`_ object.\n   If emitter API differs from `addEventListener/removeEventListener` or `$on/$off`,\n   then you need explicitly define api, like `['on', 'off']`.\n   The _`handler`_ parameter can be instance method name or a function.\n   * `property debugOn : {boolean|undefined}  -` see [debugging](#debugging) for details.\n   * `property own : {Object}                 -`\n   a keyed container for private data, that should be gracefully cleaned up.\n   * `property ownClass : {string}   -` class name.\n   * `property ownNumber : {number}  -` globally unique class instance number.\n   * `property ownName : {string}    -` initially set to `ownClass + '#' + ownNumber`.\n   \nMutating `debugOn` or `className` property will re-generate `debug()` instance method.\n\n### Performance\nThis is a simple wrapper for Windows User Timing API. In production mode it does nothing.\nUsage example:\n```javascript\n  import {perfB, perfE, perfDump} from 'val-front/performance'\n\n  perfB('crazy-effort')   //  Create begin mark.\n  performCrazyEffort()\n  perfE('crazy-effort')   //  Create end mark and measure.\n\n  perfDump().forEach(d =\u003e console.log(d))   //  Get results\n```\n\nAPI methods:\n   * `perfB(name : {string})  -` create begin mark.\n   * `perfE(name : {string})  -` create end mark and measure entry. Throws exception,\n   if tag does not match any pending begin mark.\n   * `perfGet(sortBy : {string}) : {Object[]} -` returns sorted array of statistics.\n   sortBy parameter defaults to `'total'`. Each entry is an object with fields:\n      - `avg` average duration per call,\n      - `count` calls count,\n      - `max` maximum duration,\n      - `name` set via perfB/perfE,\n      - `total` total duration of all calls with this name.\n   * `perfDump(sortBy : {string}) : {string[]} -` like perfGet, returning strings.\n   * `perfReset()  -` resets measurements statistics..\n\n### Vue.js mixin\nThis mix-in will provide a Vue.js component with _**`Own`**_ class API described above.\n\n### vueName function\n`vueName( vm, tryHarder = false ) : {string | undefined}`\u003cbr /\u003e\nTry to get a meaningful name for a Vue.js component instance.\nIt returns '#root#' for root instance or value of `vm.name` if defined or value of\ninstance options _`name`_ property.\n\nIf all the above fails, but _`tryHarder`_ is set, it will try to use component tag or filename.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalango%2Fval-front","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalango%2Fval-front","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalango%2Fval-front/lists"}