code-library

KO | EN

gitlite — search

#hacktoberfest #typescript #go #golang #machine-learning #nodejs #macos #windows #awesome #awesome-list #security #mcp #ios #open-source

(★ 27)

A collection of vanilla JavaScript components used in Odopod projects.

code-library 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Odopod Code Library (Odo) [![Build Status](https://travis-ci.org/odopod/code-library.svg?branch=master)](https://travis-ci.org/odopod/code-library)

> A collection of vanilla JavaScript components used in Odopod projects.

## Want to contribute to Odo?

Take a look at [CONTRIBUTING.md](https://github.com/odopod/code-library/blob/master/CONTRIBUTING.md).

## Packages

The Odo repo is managed as a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md); it's composed of many npm packages.

| Package | Version |
|---------|---------|
| [`@odopod/odo-affix`](/packages/odo-affix) | [![npm](https://img.shields.io/npm/v/@odopod/odo-affix.svg)](https://www.npmjs.com/package/@odopod/odo-affix) |
| [`@odopod/odo-background-video`](/packages/odo-background-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-background-video.svg)](https://www.npmjs.com/package/@odopod/odo-background-video) |
| [`@odopod/odo-base-component`](/packages/odo-base-component) | [![npm](https://img.shields.io/npm/v/@odopod/odo-base-component.svg)](https://www.npmjs.com/package/@odopod/odo-base-component) |
| [`@odopod/odo-carousel`](/packages/odo-carousel) | [![npm](https://img.shields.io/npm/v/@odopod/odo-carousel.svg)](https://www.npmjs.com/package/@odopod/odo-carousel) |
| [`@odopod/odo-device`](/packages/odo-device) | [![npm](https://img.shields.io/npm/v/@odopod/odo-device.svg)](https://www.npmjs.com/package/@odopod/odo-device) |
| [`@odopod/odo-dialog`](/packages/odo-dialog) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dialog.svg)](https://www.npmjs.com/package/@odopod/odo-dialog) |
| [`@odopod/odo-draggable`](/packages/odo-draggable) | [![npm](https://img.shields.io/npm/v/@odopod/odo-draggable.svg)](https://www.npmjs.com/package/@odopod/odo-draggable) |
| [`@odopod/odo-dropdown`](/packages/odo-dropdown) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dropdown.svg)](https://www.npmjs.com/package/@odopod/odo-dropdown) |
| [`@odopod/odo-dual-viewer`](/packages/odo-dual-viewer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dual-viewer.svg)](https://www.npmjs.com/package/@odopod/odo-dual-viewer) |
| [`@odopod/odo-expandable`](/packages/odo-expandable) | [![npm](https://img.shields.io/npm/v/@odopod/odo-expandable.svg)](https://www.npmjs.com/package/@odopod/odo-expandable) |
| [`@odopod/odo-helpers`](/packages/odo-helpers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-helpers.svg)](https://www.npmjs.com/package/@odopod/odo-helpers) |
| [`@odopod/odo-hotspots`](/packages/odo-hotspots) | [![npm](https://img.shields.io/npm/v/@odopod/odo-hotspots.svg)](https://www.npmjs.com/package/@odopod/odo-hotspots) |
| [`@odopod/odo-module`](/packages/odo-module) | [![npm](https://img.shields.io/npm/v/@odopod/odo-module.svg)](https://www.npmjs.com/package/@odopod/odo-module) |
| [`@odopod/odo-object-fit`](/packages/odo-object-fit) | [![npm](https://img.shields.io/npm/v/@odopod/odo-object-fit.svg)](https://www.npmjs.com/package/@odopod/odo-object-fit) |
| [`@odopod/odo-on-swipe`](/packages/odo-on-swipe) | [![npm](https://img.shields.io/npm/v/@odopod/odo-on-swipe.svg)](https://www.npmjs.com/package/@odopod/odo-on-swipe) |
| [`@odopod/odo-pointer`](/packages/odo-pointer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-pointer.svg)](https://www.npmjs.com/package/@odopod/odo-pointer) |
| [`@odopod/odo-responsive-attributes`](/packages/odo-responsive-attributes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-attributes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-attributes) |
| [`@odopod/odo-responsive-classes`](/packages/odo-responsive-classes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-classes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-classes) |
| [`@odopod/odo-responsive-images`](/packages/odo-responsive-images) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-images.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-images) |
| [`@odopod/odo-reveal`](/packages/odo-reveal) | [![npm](https://img.shields.io/npm/v/@odopod/odo-reveal.svg)](https://www.npmjs.com/package/@odopod/odo-reveal) |
| [`@odopod/odo-sassplate`](/packages/odo-sassplate) | [![npm](https://img.shields.io/npm/v/@odopod/odo-sassplate.svg)](https://www.npmjs.com/package/@odopod/odo-sassplate) |
| [`@odopod/odo-scroll-animation`](/packages/odo-scroll-animation) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-animation.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-animation) |
| [`@odopod/odo-scroll-feedback`](/packages/odo-scroll-feedback) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-feedback.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-feedback) |
| [`@odopod/odo-share`](/packages/odo-share) | [![npm](https://img.shields.io/npm/v/@odopod/odo-share.svg)](https://www.npmjs.com/package/@odopod/odo-share) |
| [`@odopod/odo-sticky-headers`](/packages/odo-sticky-headers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-sticky-headers.svg)](https://www.npmjs.com/package/@odopod/odo-sticky-headers) |
| [`@odopod/odo-tabs`](/packages/odo-tabs) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tabs.svg)](https://www.npmjs.com/package/@odopod/odo-tabs) |
| [`@odopod/odo-tap`](/packages/odo-tap) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tap.svg)](https://www.npmjs.com/package/@odopod/odo-tap) |
| [`@odopod/odo-video`](/packages/odo-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-video.svg)](https://www.npmjs.com/package/@odopod/odo-video) |
| [`@odopod/odo-viewport`](/packages/odo-viewport) | [![npm](https://img.shields.io/npm/v/@odopod/odo-viewport.svg)](https://www.npmjs.com/package/@odopod/odo-viewport) |
| [`@odopod/odo-window-events`](/packages/odo-window-events) | [![npm](https://img.shields.io/npm/v/@odopod/odo-window-events.svg)](https://www.npmjs.com/package/@odopod/odo-window-events) |

## Tips for advanced webpack configuration

If you use webpack (or another bundler) for your project and are already using a compiler for your JavaScript (like babel), you have the option of using odo component source files and compiling them with your project.

This has a couple benefits:

* No dependencies for odo are bundled with their dist files. For example, the `debounce` package is bundled in a couple odo components.
* Use the same babel preset for your app's code _and_ odo components. Maybe you're using [`babel-preset-env`](https://github.com/babel/babel-preset-env) so that you can compile less.

Use the `alias` object to map requests for odo components to their source files instead of dist files. This configuration is intended for webpack 2, 3, or 4.

```js
// Webpack config
{
  resolve: {
    alias: {
      '@odopod/odo-carousel$': '@odopod/odo-carousel/src/carousel.js',
      '@odopod/odo-device$': '@odopod/odo-device/src/device.js',
      '@odopod/odo-draggable$': '@odopod/odo-draggable/src/draggable.js',
      '@odopod/odo-helpers$': '@odopod/odo-helpers/src/helpers.js',
      '@odopod/odo-pointer$': '@odopod/odo-pointer/src/pointer.js',
    },
  },
}
```

Don't `exclude` odo components from being compiled with babel.

```js
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules\/(?!@odopod\/odo-)/,
      loader: 'babel-loader',
    },
  }
]
```

code-library

code-library 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

code-library

code-library 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README