open-index/open-npm huggingface dataset:
npm package: @hirect/log
Description: ## import ```javascript import {log} from '@hirect/log' Vue.use(log, {   // 'prod' or other   env: context.app.$config.env,   // app router   router: context.app.router,   // core send method, must return a promise   send: (data, headers) => {     return 
Latest version: 0.2.4

# Usage

## import
```javascript
import {log} from '@hirect/log'
Vue.use(log, {
  // 'prod' or other
  env: context.app.$config.env,
  // app router
  router: context.app.router,
  // core send method, must return a promise
  send: (data, headers) => {
    return api.post(data, {
      headers
    })
  },
  
  // optional: console or online, default 'dev'
  output: context.app.$config.env === 'dev' ? 'console' : 'online',
  // optional: store just for user state, can be null if user doesn't login
  store: context.app.store,
  // optional: get config from server, return a promise, defualt set to server.js
  config: () => Promise().then(res),
})
```

## PV and PD

### $route.meta.log 

Mask pageId in meta.log. e.g.

```javascript
meta: {
    log: {
      pageId: 'p_re_loginweb',
      commonExtra: {},  
      extra: {}  
    }
}
```
Sometimes a page is not compatible with a route component.
A component can contain unlimited page. We can use directive instead:

```vue
<div v-log.pageview:p_re_profile_detail = 'extra'></div>
```

### Dynamic pageId

PageId can be dynamically in reused component.

meta example:
```javascript
meta: {
    log: {
      pageId: 'dynamicPageId',
      dynamic: true  
    }
}
```
use this.dynamicPageId as pageId

directive example: 

```vue
<div v-log.pageview = '{page_id: () => dynamicPageId, extra: () => value}'></div>
```

### pd

auto

## MC

```vue
<div v-log.click:e_re_info_flow_profile_card = 'extra'></div>
```
### dynamic modular_id

```vue
<div v-log.click = '{modular_id: () => modularId, extra: () => extra}'></div>
```

## MV

```vue
<div v-log.view:e_re_info_flow_profile_card = 'extra'></div>
```
### dynamic modular_id

```vue
<div v-log.view = '{modular_id: () => modularId, extra: () => extra}'></div>
```

## Dynamic value

All event's (PV,MV,MC) value can be dynamically set with a function.
Value will be calculated when event is triggered.

e.g.

```vue
<div v-log.pageview:p_re_profile_detail = '() => extra'></div>
```

dynamic e.g.

```vue
<div v-log.pageview = '{page_id: () => pageId,extra: () => extra}'></div>
```

## other

### manual log 

```javascript
import {triggerPV, triggerPD, send} from '@hirect/log'
```

triggerPV: pv

triggerPD: pd

send: function (log_type, modular_id, exter) {}


### encode

```javascript
import {encode} from '@hirect/log'
```
npm package: @hired/hcl
Description: 📚 [Take me to Storybook](https://main--65fb4252909097f190fc1928.chromatic.com)
Latest version: 0.0.54

📚 [Take me to Storybook](https://main--65fb4252909097f190fc1928.chromatic.com)

# hcl 🧪

`hcl` is a component library developed for implementing UI at [hired.com](hired.com).

The library is built on the following principles:

1. Look _pretty close_ to the rest of [hired.com](hired.com)
1. Make components rapidly available
1. Be as accessible as possible given development timeframes
1. Don't collide with the myriad other UI implementations on the platform
1. Enable development without full reliance on design input
1. Don't expose implementation details (yes, that means Tailwind is not coming to the [hired.com](hired.com) codebase)
1. Provide easy access to additional styling and overrides where appropriate
1. Don't reinvent the wheel, use existing headless UI libraries when we can
1. Target the tech stack and versioning of the [hired.com](hired.com) codebase dependencies
1. Be consistent

# Developing hcl

## Running hcl locally

1. Run `yarn storybook` to start the Storybook server. This is where you will develop and document hcl components.

## Linking hcl to hired/hired

Linking `hcl` with `hired` allows you to see changes you've made to `hcl` locally within the `hired` dev environment.

1. From the `hcl` repo, run `yarn link`
1. From the `hired` repo, run `yarn link @hired/hcl`

### Running into issues with linking?

Running `yarn build` within `hired/hired` will create artifacts that will be served to the browser and may result in changes to your linked package not being shown on screen, as well as runtime errors. One workaround is to run `rails assets:clobber` in your `hired/hired` project (this will remove `public/vite-dev` as well as `vite` caches) and to serve JS assets via `yarn start` instead.

**_Note: running your rails server without running the yarn server will also trigger a build, causing the same issue detailed above._**

🤓 _Please add any new issues and solutions that may arise_ 🤓

## 🚨 **Remember to:** 🚨

1.  **Export your components in `src/components/index.ts`**
1.  **Increment the semantic version of the package whenever making an update on anything that gets exported from the library**
1.  **Bump up the version of `hcl` in `hired/hired` any time a new version is published**