Git Product home page Git Product logo

contribute.jquery.org's Introduction

jQuery — New Wave JavaScript

Meetings are currently held on the matrix.org platform.

Meeting minutes can be found at meetings.jquery.org.

Contribution Guides

In the spirit of open source software development, jQuery always encourages community code contribution. To help you get started and before you jump into writing code, be sure to read these important contribution guidelines thoroughly:

  1. Getting Involved
  2. Core Style Guide
  3. Writing Code for jQuery Projects

References to issues/PRs

GitHub issues/PRs are usually referenced via gh-NUMBER, where NUMBER is the numerical ID of the issue/PR. You can find such an issue/PR under https://github.com/jquery/jquery/issues/NUMBER.

jQuery has used a different bug tracker - based on Trac - in the past, available under bugs.jquery.com. It is being kept in read only mode so that referring to past discussions is possible. When jQuery source references one of those issues, it uses the pattern trac-NUMBER, where NUMBER is the numerical ID of the issue. You can find such an issue under https://bugs.jquery.com/ticket/NUMBER.

Environments in which to use jQuery

  • Browser support
  • jQuery also supports Node, browser extensions, and other non-browser environments.

What you need to build your own jQuery

To build jQuery, you need to have the latest Node.js/npm and git 1.7 or later. Earlier versions might work, but are not supported.

For Windows, you have to download and install git and Node.js.

macOS users should install Homebrew. Once Homebrew is installed, run brew install git to install git, and brew install node to install Node.js.

Linux/BSD users should use their appropriate package managers to install git and Node.js, or build from source if you swing that way. Easy-peasy.

How to build your own jQuery

First, clone the jQuery git repo.

Then, enter the jquery directory, install dependencies, and run the build script:

cd jquery
npm install
npm run build

The built version of jQuery will be placed in the dist/ directory, along with a minified copy and associated map file.

Build all jQuery release files

To build all variants of jQuery, run the following command:

npm run build:all

This will create all of the variants that jQuery includes in a release, including jquery.js, jquery.slim.js, jquery.module.js, and jquery.slim.module.js along their associated minified files and sourcemaps.

jquery.module.js and jquery.slim.module.js are ECMAScript modules that export jQuery and $ as named exports are placed in the dist-module/ directory rather than the dist/ directory.

Building a Custom jQuery

The build script can be used to create a custom version of jQuery that includes only the modules you need.

Any module may be excluded except for core. When excluding selector, it is not removed but replaced with a small wrapper around native querySelectorAll (see below for more information).

Build Script Help

To see the full list of available options for the build script, run the following:

npm run build -- --help

Modules

To exclude a module, pass its path relative to the src folder (without the .js extension) to the --exclude option. When using the --include option, the default includes are dropped and a build is created with only those modules.

Some example modules that can be excluded or included are:

  • ajax: All AJAX functionality: $.ajax(), $.get(), $.post(), $.ajaxSetup(), .load(), transports, and ajax event shorthands such as .ajaxStart().

  • ajax/xhr: The XMLHTTPRequest AJAX transport only.

  • ajax/script: The <script> AJAX transport only; used to retrieve scripts.

  • ajax/jsonp: The JSONP AJAX transport only; depends on the ajax/script transport.

  • css: The .css() method. Also removes all modules depending on css (including effects, dimensions, and offset).

  • css/showHide: Non-animated .show(), .hide() and .toggle(); can be excluded if you use classes or explicit .css() calls to set the display property. Also removes the effects module.

  • deprecated: Methods documented as deprecated but not yet removed.

  • dimensions: The .width() and .height() methods, including inner- and outer- variations.

  • effects: The .animate() method and its shorthands such as .slideUp() or .hide("slow").

  • event: The .on() and .off() methods and all event functionality.

  • event/trigger: The .trigger() and .triggerHandler() methods.

  • offset: The .offset(), .position(), .offsetParent(), .scrollLeft(), and .scrollTop() methods.

  • wrap: The .wrap(), .wrapAll(), .wrapInner(), and .unwrap() methods.

  • core/ready: Exclude the ready module if you place your scripts at the end of the body. Any ready callbacks bound with jQuery() will simply be called immediately. However, jQuery(document).ready() will not be a function and .on("ready", ...) or similar will not be triggered.

  • deferred: Exclude jQuery.Deferred. This also excludes all modules that rely on Deferred, including ajax, effects, and queue, but replaces core/ready with core/ready-no-deferred.

  • exports/global: Exclude the attachment of global jQuery variables ($ and jQuery) to the window.

  • exports/amd: Exclude the AMD definition.

  • selector: The full jQuery selector engine. When this module is excluded, it is replaced with a rudimentary selector engine based on the browser's querySelectorAll method that does not support jQuery selector extensions or enhanced semantics. See the selector-native.js file for details.

Note: Excluding the full selector module will also exclude all jQuery selector extensions (such as effects/animatedSelector and css/hiddenVisibleSelectors).

AMD name

You can set the module name for jQuery's AMD definition. By default, it is set to "jquery", which plays nicely with plugins and third-party libraries, but there may be cases where you'd like to change this. Pass it to the --amd parameter:

npm run build -- --amd="custom-name"

Or, to define anonymously, leave the name blank.

npm run build -- --amd
File name and directory

The default name for the built jQuery file is jquery.js; it is placed under the dist/ directory. It's possible to change the file name using --filename and the directory using --dir. --dir is relative to the project root.

npm run build -- --slim --filename="jquery.slim.js" --dir="/tmp"

This would create a slim version of jQuery and place it under tmp/jquery.slim.js.

ECMAScript Module (ESM) mode

By default, jQuery generates a regular script JavaScript file. You can also generate an ECMAScript module exporting jQuery as the default export using the --esm parameter:

npm run build -- --filename=jquery.module.js --esm
Factory mode

By default, jQuery depends on a global window. For environments that don't have one, you can generate a factory build that exposes a function accepting window as a parameter that you can provide externally (see README of the published package for usage instructions). You can generate such a factory using the --factory parameter:

npm run build -- --filename=jquery.factory.js --factory

This option can be mixed with others like --esm or --slim:

npm run build -- --filename=jquery.factory.slim.module.js --factory --esm --slim --dir="/dist-module"

Custom Build Examples

Create a custom build using npm run build, listing the modules to be excluded. Excluding a top-level module also excludes its corresponding directory of modules.

Exclude all ajax functionality:

npm run build -- --exclude=ajax

Excluding css removes modules depending on CSS: effects, offset, dimensions.

npm run build -- --exclude=css

Exclude a bunch of modules (-e is an alias for --exclude):

npm run build -- -e ajax/jsonp -e css -e deprecated -e dimensions -e effects -e offset -e wrap

There is a special alias to generate a build with the same configuration as the official jQuery Slim build:

npm run build -- --filename=jquery.slim.js --slim

Or, to create the slim build as an esm module:

npm run build -- --filename=jquery.slim.module.js --slim --esm

Non-official custom builds are not regularly tested. Use them at your own risk.

Running the Unit Tests

Make sure you have the necessary dependencies:

npm install

Start npm start to auto-build jQuery as you work:

npm start

Run the unit tests with a local server that supports PHP. Ensure that you run the site from the root directory, not the "test" directory. No database is required. Pre-configured php local servers are available for Windows and Mac. Here are some options:

Essential Git

As the source code is handled by the Git version control system, it's useful to know some features used.

Cleaning

If you want to purge your working directory back to the status of upstream, the following commands can be used (remember everything you've worked on is gone after these):

git reset --hard upstream/main
git clean -fdx

Rebasing

For feature/topic branches, you should always use the --rebase flag to git pull, or if you are usually handling many temporary "to be in a github pull request" branches, run the following to automate this:

git config branch.autosetuprebase local

(see man git-config for more information)

Handling merge conflicts

If you're getting merge conflicts when merging, instead of editing the conflicted files manually, you can use the feature git mergetool. Even though the default tool xxdiff looks awful/old, it's rather useful.

The following are some commands that can be used there:

  • Ctrl + Alt + M - automerge as much as possible
  • b - jump to next merge conflict
  • s - change the order of the conflicted lines
  • u - undo a merge
  • left mouse button - mark a block to be the winner
  • middle mouse button - mark a line to be the winner
  • Ctrl + S - save
  • Ctrl + Q - quit

QUnit Reference

Test methods

expect( numAssertions );
stop();
start();

Note: QUnit's eventual addition of an argument to stop/start is ignored in this test suite so that start and stop can be passed as callbacks without worrying about their parameters.

Test assertions

ok( value, [message] );
equal( actual, expected, [message] );
notEqual( actual, expected, [message] );
deepEqual( actual, expected, [message] );
notDeepEqual( actual, expected, [message] );
strictEqual( actual, expected, [message] );
notStrictEqual( actual, expected, [message] );
throws( block, [expected], [message] );

Test Suite Convenience Methods Reference (See test/data/testinit.js)

Returns an array of elements with the given IDs

q( ... );

Example:

q("main", "foo", "bar");

=> [ div#main, span#foo, input#bar ]

Asserts that a selection matches the given IDs

t( testName, selector, [ "array", "of", "ids" ] );

Example:

t("Check for something", "//[a]", ["foo", "bar"]);

Fires a native DOM event without going through jQuery

fireNative( node, eventType )

Example:

fireNative( jQuery("#elem")[0], "click" );

Add random number to url to stop caching

url( "some/url" );

Example:

url("index.html");

=> "data/index.html?10538358428943"


url("mock.php?foo=bar");

=> "data/mock.php?foo=bar&10538358345554"

Run tests in an iframe

Some tests may require a document other than the standard test fixture, and these can be run in a separate iframe. The actual test code and assertions remain in jQuery's main test files; only the minimal test fixture markup and setup code should be placed in the iframe file.

testIframe( testName, fileName,
  function testCallback(
      assert, jQuery, window, document,
	  [ additional args ] ) {
	...
  } );

This loads a page, constructing a url with fileName "./data/" + fileName. The iframed page determines when the callback occurs in the test by including the "/test/data/iframeTest.js" script and calling startIframeTest( [ additional args ] ) when appropriate. Often this will be after either document ready or window.onload fires.

The testCallback receives the QUnit assert object created by testIframe for this test, followed by the global jQuery, window, and document from the iframe. If the iframe code passes any arguments to startIframeTest, they follow the document argument.

Questions?

If you have any questions, please feel free to ask on the Developing jQuery Core forum or in #jquery on libera.

contribute.jquery.org's People

Contributors

agcolom avatar ajpiano avatar arschmitz avatar arthurvr avatar aurelioderosa avatar coliff avatar dcardosods avatar dmethvin avatar ericcarraway avatar fabiosoggia avatar garyjones avatar gibson042 avatar gnarf avatar jamesmgreene avatar jzaefferer avatar kborchers avatar krinkle avatar kswedberg avatar mikesherov avatar pablofiumara avatar rdworth avatar redwolves avatar rwaldron avatar sarogers avatar scottgonzalez avatar sfrisk avatar stuartsan avatar supertassu avatar thibaut avatar tjvantoll avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

contribute.jquery.org's Issues

Framed CLA not visible in Firefox

The CLA (http://contribute.jquery.org/CLA/) is not visible in the latest version of Firefox (21.0) on Mac OSX. it is also not visible on Safari 5.1.7 (which is old I admit, but is the latest on Mac OSX 10.6.8). However, it is visible with Safari 6.0.3 on Mac OS X 10.7.5. On both OSs, Chrome will show the form correctly (Version 27.0.1453.116). I am not too worried about Safari 5, but I am about Firefox 21.0.

Style guides should be moved into a folder

Instead of /js-style-guide/ and /html-style-guide/ we should have a top-level /style-guide/ with /js/ and /html/ inside it. In the future, perhaps we'd add a /css/. This also allows us to have a single style-guide landing page that introduces the concept of sharing all the guides across all foundation projects, and would link to all. It's also consistent with learn.jquery.com/style-guide/

Add heading anchors

e.g. http://contribute.jquery.org/style-guide/js/#type-checks

The wiki supported this, which enabled nice link-ability such as:

http://docs.jquery.com/JQuery_Core_Style_Guidelines#Type_Checks

I'm not sure what format to use, WordPress' slug format would be best imho (to lower case, converting any special characters to dashes).

Maybe it can be done automatically on all content headings from jquery-wp-content, but for now adding here where it would be a regression from the wiki. Especially for coding styling, linking to sections is useful.

JS Style Guide: Does top-level indent exception apply to UMD wrappers?

We have this line in the style guide:

If the entire file is wrapped in a closure, the function body is not indented.

Since introducing UMD wrappers in jQuery UI, we use this inconsistently. The wrappers are indented: https://github.com/jquery/jquery-ui/blob/fd7e1e3040ec2c6edb4754135602b5c31678e659/ui/accordion.js#L12

The "factory" isn't: https://github.com/jquery/jquery-ui/blob/fd7e1e3040ec2c6edb4754135602b5c31678e659/ui/accordion.js#L27

We might as well not indent the UMD wrapper.

I noticed this while testing the latest esformatter version with jQuery UI files. esformatter's TopLevelFunctionBlock setting currently doesn't indent any top-level function scope, which used to work well before we introduced the UMD wrappers.

Add CSS Style Guide

Add a page that outlines the style guide for CSS across all jQuery projects.

Community Page

In page/community.md, following the mold of the triage page, put together some information about contributing to the community, including explaining that (obviously) contributing to any of the areas of any project is contributing to the community. The page should go on to explain information about how to get involved with jQuery Events and running local meetups, and link to pages on the site explaining about IRC and support as well.

Contributing to Web Sites page

In page/web.md, following the mold of the triage page, put together instructions on the basics of contributing to jQuery Foundation websites, including:

  • high level overview of jquery-wp-content and content repos, why we made it work that way instead of wikis and a million different wordpress installs
  • outlining dependencies
  • basics of editing workflow and deploy process
  • links to all the website repos
  • when you'll need to edit web-base-template vs a content repo
  • current status of where people should be contributing
  • list of exceptions (sites not on jquery-wp-content, whether they ever will be)

JS Style Guide: Clarify object expression in array expression

How should this look like?

var eras = [ {
    "name": "n. Chr.",
    "start": null,
    "offset": 0
} ];

According to the current styleguide, this should be correct. But I suspect the exception for whitespace around object expressions within function arguments also applies to array expressions. Which would look like this instead:

var eras = [{
    "name": "n. Chr.",
    "start": null,
    "offset": 0
}];

JS style guide: Formatting ternary expressions

We don't have rules on how to format ternary expressions. Accordingly we have quite a few styles for these:

// from core/css.js
// inline
parts = typeof value === "string" ? value.split(" ") : [ value ];

// from core/css.js
// line break after question mark and colon:
return rnumnonpx.test( computed ) ?
    jQuery( elem ).position()[ prop ] + "px" :
    computed;

// from ui/jquery.ui.progressbar.js
// line break after colon:
return this.indeterminate ? false :
            Math.min( this.options.max, Math.max( this.min, newValue ) );

There's probably more variations.

@dmethvin @scottgonzalez @gibson042 do you have preferences on any of these?

Small style guide typos

Received via e-mail:


Howdy, I was reading the JavaScript Style Guide page on your site and found a couple errors.

Both are in the Multi-line Statements section:

  1. In the second example ( ternary operator ), there is a "var" at the beginning which needs removal.
  2. In the third example, there is the misspelling of "fistCondition", which should read "firstCondition". It is my assumption that this is not a hidden Chuck Norris joke as it would counter-indicate the style guide recommendations concerning clarity.

That is all for now, Pete

Documentation on setting Git config

We need to document how to set your name and email address in Git. We should link to this from Contributing to Code, Commits and Pull Requests, and even the CLA page.

Document how to contribute translations

Regarding questions like this: "@qunitjs I would like to translate http://qunitjs.com/ pages into Japanese. Can I have a permission to do it?" https://twitter.com/cssradar/status/313666013185077248

Apart from pointing at the license for the content, we want to figure out how to organize translations. One idea that @rdworth or @gnarf37 had in Vienna was to have a repository per locale, with folders for each site repository (the domain names). That way translations can have their own release cycle and contributors.

This may also become work for brand and infrastructure, so this is just a starting point.

Contributing Code page

In page/code.md, following the mold of the triage page, put together instructions on the basics of contributing code to any jQuery project, e.g., forking repos, making pull requests, writing tests, not removing tests, following the style guide, using grunt, etc, with links to all the project repos.

This should probably link to the Won't Fix page, among other things as well.

JS Style Guide: line length exception for comments with long urls or long regex?

Occasionally, the jQuery codebase goes over 100 characters a line for regexes (and potentially long urls in comments). E.g.:

bool: /^(?:checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped)$/i,

There are ways to split multiline regexes, but this involves using the constructor and having to double escape backslashes.

Should we make an exception for regex literals and comments? Note I'll be implementing this in JSCS no matter what we decide.

Documentation page

In page/documentation.md, following the mold of the triage page, put together instructions on the basics of contributing documentation to any jQuery project, e.g., forking repos, making pull requests, following the style guide, using grunt, etc, with links to all the project repos

Document how to be a maintainer

We provide information for contributors, but nothing for maintainers. While we don't add people to jQuery Core, we should generally give out more write access to spread the load. I've never seen anyone abuse that "power", while they usually become more engaged in the project, since they now have more authority and try to make that up in the necessary responsibility.

I've started putting together some guidelines for reviewing PRs, should be valid at least for QUnit and mostly jQuery UI: https://gist.github.com/jzaefferer/a93958b48faa55ff84c5

Do we just give maintainers read access to the CLA document? Or is there some other option?

Add bug triage boilerplate example replies

Perhaps on the triage page, or on a separate page linked from it, we should codify our example triage answers for various situations - will be useful for us and new prospective triagers.

Review and Publicize How to Report Bugs

http://contribute.jquery.org/bug-reports/ was ported from MediaWiki and updated to address all projects instead of just core. The content should be reviewed for completeness and links to latest releases and WIP builds for all projects should be included (preferably by linking to pages that will be updated when releases occur).

This page isn't currently discoverable without searching the site.

Drop exceptions from JS style guide

Need to look for the others, but the single string argument exceptions needs to go away:

// Nested calls
foo( bar(arg) );

Should be foo( bar( arg ) );

// Single argument string literal, no space
foo("bar");

Should be foo( "bar" ).

// Inner grouping parens, no space
if ( !("foo" in obj) ) {
}

Should be if ( !( "foo" in obj ) ) {

Space omission is allowed when dereferencing an array:
array[0];

Should be array[ 0 ].

This is mostly for syncing with the Core team to see if there are any objections in dropping exceptions.

Support page

In page/support.md, following the mold of the triage page, put together instructions on the basics of contributing support to other users of jQuery projects, e.g., the forums, IRC, stackoverflow, etc. Should include:

  • Links to various resources
  • explaining how support is a great way to learn more about projects without needing to run into the problems yourself, learn about intricacies and edge cases and put them in your toolbox
  • Advice on giving support
    • talking about being patient, how to coax more information out of people
    • avoiding getting frustrated, it's better to say nothing than editorialise
    • help people solve the problems they need help with, i.e., "Not Telling People The Solution Is To Use a Different CMS"

Should this site be on .com or .org?

Before we get too far down the road of actually setting up the subdomain (cc @gnarf37) , we should have one final discussion on whether the URL for this is contribute.jquery.com or contribute.jquery.org.

I don't have strong feelings either way. @dmethvin and I felt OK about .com but something about .org feels logical as well. Wanted to put this out there for discussion before it's finalised, however, so please give your thoughts on this.

CC @scottgonzalez @jzaefferer @rdworth

IRC Page?

Since IRC is so crucial to involvement in our projects, should we have a explaining that very fact, and then links to all of our channels, and resources for getting set up, using a bouncer, etc?

Alternatively, this could be maintained as the content of irc.jquery.com.

We'd link to this page in the header.

Move this site to contribute.jquery.org

We should have done this from the outset, but it makes more sense on .org than .com

This repo name needs to be changed, and the urls have to be changed in jquery/jquery-wp-content sites.php and menu_header.php, and the DNS entries have to be updated.

Getting Started with Open Source

In page/open-sourcemd, we should have a page about the basics of getting started with open source, talking about things like

  • getting comfortable with the command line, even if you've been reluctant to
  • getting used to local development, if you aren't
  • advice for interacting positively and proactively in a project, dealing with people who aren't
  • the idea that contributing goes beyond just writing code and that projects do value the people who write docs, help users, etc.

More ideas welcome. This page is not really supposed to be specific to jQuery and should be useful to anyone who's been using FOSS and wants some background on how to get involved and how to think about what they're signing up for :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.